图片比例来自 CSS

Question

如何从 CSS 我设置了宽度和高度的图像进行缩放。目前，它看起来很紧张。这就是我在 HTML:

中所做的

<div id="notification-media" *ngIf="notification.type < 200">                            
   <img src="{{notification.video.thumbnail}}" id="notification-video-image"/>
</div>

在我的 CSS 文件中：

#notification-video-image{
    width: 96px;
    height:54px;
    margin-top: 30px;
}

 #notification-media{
     width: 30%;
     float: right;
     margin-right: 18px;
 }

我也尝试设置 background-size:cover 和 width:100%; , height:100%;，但它并没有使我达到预期的结果。

Answer 1

将 width 或 height 设置为 auto。

#notification-video-image{
    width: 96px; // auto or
    height:54px; // auto
    margin-top: 30px;
}

图片比例来自 CSS

Image scale from CSS

css

scale

image-scaling

image-size

angular2-template