html - 在特定尺寸的 div 中适合不同尺寸的图像

Question

我有不同尺寸的图片(1920 x 1080)。

我想将这张图片放入具有样式的 div 中我看到样式指定为的 css 文件

.detail-img{ width:100%; max-height:350px; overflow:hidden; margin-bottom:30px;}
.detail-img img, .detail-img-a img{width:100%;}
.detail-img-a{ width:100%; margin-bottom:15px;}

在html页面中div就像

<div class="detail-img">
     <img  src="<%= @event.avatar.url %>">
</div>

原图是

但它显示为

有没有办法适合我的 div？

Answer 1

你必须为图片设置最大宽度

  .detail-img img{
      max-width: 100%;
   }