适合特定尺寸div的不同尺寸的图像

Question

我有不同大小的图像说（1920×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%;
   }