Question

我面临一个奇怪的问题。我正在创建Image对象，然后以HTML格式显示它们（我正在使用Ionic），但是，它没有显示我设置的大小，但是在打印创建的对象时，我得到以下输出：

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

但是，当我在浏览器中检查HTML元素时，这就是我所拥有的：

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

似乎正在调整其大小，但HTML并未显示实际大小，因为所有元素都具有我设置的大小，这是我的代码：

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;
  }
}

如何在miniature HTML标记中创建video变量的img属性：

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

这是什么问题？谢谢！

Answer 1

好的，可以通过以下方式在scss中设置宽度和高度

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

它起作用了，并将该尺寸设为初始尺寸，然后我可以使用百分比并根据这些px调整图像的大小。

TypeScript-图片对象未按所需大小绘制

1 个答案: