Why does the image turn very small when browser window is full screen?

Question

I have a list of images to show, all of them will adjust to the window size getting smaller. So when the window size is smaller all of the images are shown in normal size as expected, but when I change the window to fullscreen or width, all of the images get too small, very very small.

I am using Angular 8. I am using W3.CSS from W3Schools and some CSS: https://www.w3schools.com/w3css/default.asp

This is the css file of the component (I am using Angular 8):

.row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}

.col-md-12,
.col-md-2 {
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

div {
  display: block;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

div.one {
  height: 10em;
  display: flex;
  align-items: center;
  justify-content: center
}

.two {
  margin: 0
}

This is the component template:

<h2 class="w3-animate-top w3-center" style="font-size:4vw;"> <b>Elija el presidente</b> </h2>
<br>
<div class="col-md-12">
  <div class="row one" style="margin: auto; width: 75%; padding: 15px;">
    <div class="col-md-12 two" *ngFor="let presidente of presidentes" class="w3-hover-shadow" style="width:20%; padding: 15px">
      <div class="row" style="cursor: pointer;" [ngClass]="{'w3-purple': valorMarcado === presidente.numero}" (click)="marcar(presidente.numero)">
        <div class="col-md-2 w3-hover-opacity">
          <header class="w3-container w3-deep-purple">
            {{presidente.numero}}
          </header>
          <img [src]="presidente.img" style="width:63%; display: block; margin-left: auto; margin-right: auto;">
          <p class="w3-center" style="margin: auto; font-size:1.5vw;">Candidato {{presidente.numero}} A <br> Presidente(TA)</p>
        </div>
      </div>

    </div>
    <div class="col-md-12" style="width:20%; padding: 15px">
      <div class="row" style="cursor: pointer;">
        <div class="col-md-2 w3-hover-opacity" (click)="marcar('Nada')">
          <header class="w3-container w3-deep-purple">
            16
          </header>
          <img src="../assets/Imagenes/NINGUNO.png" style="width:63%; display: block; margin-left: auto; margin-right: auto;">
          <p class="w3-center" style="margin: auto; font-size:1.5vw;">Nada</p>
        </div>
      </div>
    </div>
  </div>
</div>

This is the ts file:

import { Component, OnInit, Output, EventEmitter } from '@angular/core';
import { ResultadoFinalService } from '../resultado-final.service';


@Component({
  selector: 'app-pld-presidente',
  templateUrl: './pld-presidente.component.html',
  styleUrls: ['./pld-presidente.component.css']
})
export class PldPresidenteComponent implements OnInit {

  @Output() pre = new EventEmitter<any>();

  presidentes = [
    {
      numero: 1,
      img: '../assets/Imagenes/Candidato M.png'
    },
    {
      numero: 2,
      img: '../assets/Imagenes/Candidato F.png'
    },
    {
      numero: 3,
      img: '../assets/Imagenes/Candidato M.png'
    },
    {
      numero: 4,
      img: '../assets/Imagenes/Candidato F.png'
    },
    {
      numero: 5,
      img: '../assets/Imagenes/Candidato M.png'
    },
    {
      numero: 6,
      img: '../assets/Imagenes/Candidato F.png'
    },
    {
      numero: 7,
      img: '../assets/Imagenes/Candidato M.png'
    },
    {
      numero: 8,
      img: '../assets/Imagenes/Candidato F.png'
    },
    {
      numero: 9,
      img: '../assets/Imagenes/Candidato M.png'
    },
    {
      numero: 10,
      img: '../assets/Imagenes/Candidato F.png'
    },
    {
      numero: 11,
      img: '../assets/Imagenes/Candidato M.png'
    },
    {
      numero: 12,
      img: '../assets/Imagenes/Candidato F.png'
    },
    {
      numero: 13,
      img: '../assets/Imagenes/Candidato M.png'
    },
    {
      numero: 14,
      img: '../assets/Imagenes/Candidato F.png'
    },
    {
      numero: 15,
      img: '../assets/Imagenes/Candidato M.png'
    }
  ];

  valorMarcado = 0;

  marcar(value) {
    this.valorMarcado = value;
    this.rf.presidente = value;

    if (this.rf.activarResultadoFinal()) {
      this.rf.sendResult();
    }
  }

  constructor(private rf: ResultadoFinalService) {
   }

  ngOnInit() {
  }

}

This is how the images show:

Answer 1

I've recreated your code for the images and Im not getting your resize problem. Could you confirm it please ? Here is the stackblitz url: stackblitz.com/edit/angular-u1nw6v

It appears your styles.css from your angular have the issue. Could you upload a stackblitz for better debugging? Your component is working fine.

Edit1:

When I said about styles.css I meant your general styles in your angular.json (Sorry I should've written that).

So your main problem is in your bootstrap css. Take that thing out of your angular.json and is everything going to return to normal. I do suggest you to see the bootstrap documentation and do not mix the grid tools between the w3schools and bootsrap css.

So in your angular.json styles is like this:

 "styles": [
              "src/styles.css",
              "src/w3.css",
              "node_modules/bootstrap/dist/css/bootstrap.min.css"
            ]

Change it to this:

 "styles": [
              "src/styles.css",
              "src/w3.css"
            ]

If there is any problem please tell me.