html - 超出尺寸的图像

问题描述

我想在我的 div 中显示图像。我根据条件显示不同的图像（如果moviePoster为真）。我在moviePoster 中显示它，但如果它是假的，我会显示一个通知该文件未找到的图像。我不知道为什么，但是当我显示这两种类型的图像时，moviePoster 图像超过了潜水的大小。

这是我的应用程序中的问题屏幕

.list {
  border: 1px solid grey;
  display: flex;
  margin: 30px;
  height: 230px;
  border-radius: 10px;
  box-shadow: 1px 1px 12px #555;
}

.list-img {
  // border: 5px solid red;
  width: 20%;
}

img {
  height: 100%;
  width: 100%;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

<div class="list">
    <div class="list-img">
        <div *ngIf="moviePoster; else notFound">
            <img src="https://image.tmdb.org/t/p/w200/{{moviePoster}}" alt="...">
        </div>
        <ng-template #notFound>
            <img src="../../assets/not_found.jpg" alt="...">
        </ng-template>
    </div>

标签： htmlcssangularimage

img 是默认显示：内联，因此高度和宽度指的是内部内容。无论如何，设置图像的宽度和高度通常会拉伸图像，这很糟糕。

我建议使用将图像设置为背景的 div，所以使用类似的东西：

html:

...
<div 
     *ngif="..." 
     class="thumbnail"
     style="background-image: url(https://...{{ moviePoster }})"
></div>
...

CSS：

.thumbnail{
     background-size: cover;
     background-position: center;
}

您也应该将此类应用于#notFound。

缺少一件事：缩略图 div 必须表达高度和宽度您可以通过 css 以多种方式做到这一点，具体取决于您如何构建卡片盒。

希望能帮助到你。

html - 超出尺寸的图像

问题描述

解决方案

推荐阅读