Image object not drawing with the desired size

Ionic Framework ionic-v3
1

I’m facing a weird issue. I am creating Image objects and then displaying them in HTML (I’m using Ionic), however, it’s not showing the size I’ve set but when I print the object I created I get the following output:

<img width="1200" height="700" src="http://removed...">

However, when I inspect the HTML element in the browser this is what I have:

<img src="http://removed...">

It seems that it’s resizing it but the HTML is not showing the real size because all elements have the size I’ve set, this is my code:

HTML:

<ion-slides spaceBetween="15" slidesPerView="1.5" zoom="false">
     <ion-slide [class.oculto]="!oculto" *ngFor="let video of lista.videos">
        <button (click)="verVideo(video, lista.nombre)">
           <ion-thumbnail>
            <div *ngIf="video.visto" class="video-visto">
               <ion-chip color="primary">
                  <i class="icon-sm icon-ophthalmology" aria-hidden="true"></i>
                  <span class="label-chip">Visto</span>
               </ion-chip>
            </div>
            <img [src]="video.miniatura.src">
           </ion-thumbnail>
           <p class="titulo-video">{{video.titulo}}</p>
         </button>
      </ion-slide>
 </ion-slides>

SCSS:

page-videos-explicativos {
  .searchbar-ios {
    width: 98% !important;
    .searchbar-input {
      padding-left: 40px !important;
    }
  }

  .searchbar-md .searchbar-input {
    padding-left: 55px !important;
  }

  ion-searchbar.search.searchbar.searchbar-md,
  ion-searchbar.search.searchbar.searchbar-ios {
    margin-bottom: -2rem !important;
    padding: 0% !important;
  }

  .searchbar-clear-icon.disable-hover.button.button-ios.button-clear.button-clear-ios {
    display: none !important;
  }

  ion-slides ion-slide button {
    padding: 0;
    background: none;
    text-align: left;
  }

  .thumbnail-buscar {
    width: 15rem;
    height: 8rem;
    padding-right: 0;
  }

  .video-visto-busqueda,
  .video-visto {
    position: absolute;
  }

  .video-visto {
    padding: 0.5rem;
    top: 0.1;
    right: 0.5rem;
  }

  .video-visto-busqueda {
    padding: 0.1rem;
    top: 0.9rem;
    left: 7.3rem;
  }

  ion-chip {
    height: 2rem !important;
    padding-right: 1rem;
    i {
      font-size: 2rem !important;
      margin-right: -0.3rem !important;
      padding-left: 1rem !important;
      padding-top: 0.2rem !important;
      padding-right: 1rem !important;
      margin-top: -0.3rem !important;
    }
    .label-chip {
      font-size: 1rem !important;
      margin-top: -0.7rem !important;
      padding-top: 0.15rem !important;
    }
  }

  .oculto {
    display: none;
  }

  ion-icon.icon.icon-md.ion-md-arrow-back,
  ion-slides ion-slide button p,
  ion-label p {
    color: map-get($colors, primary);
  }

  ion-slide {
    margin-right: 15px !important;
    width: 65.3% !important;
  }

  .button {
    object-fit: cover;
  }

  .swiper-slide {
    display: inline;
    padding-top: 0.5rem;
  }
}

How I create the miniature attribute of my video variable in the img HTML tag:

this.miniatura = new Image(1200, 700);
this.miniatura.src = "http://removed...";

What’s the problem here? Thanks!

2

This solved it:

ion-thumbnail img {
    width: 1280px !important;
    height: 720px !important;
  }