具有固定高度的响应图像

Question

我希望有一个固定高度的响应式图像。

这是我的HTML：

<div class="col-md-6">
   <div class="img">
       <img src="http://image.noelshack.com/fichiers/2016/16/1461065658-b-v-s.jpg">
   </div>
</div>
<div class="col-md-6">
   <div class="img">
       <img src="http://image.noelshack.com/fichiers/2016/16/1461065665-kfp3.jpg">
   </div>
</div>

这是我的css：

.col-md-6 {
   width: 50%;
   float: left;
 }

.img {
   overflow: hidden;
   position: relative;
   height: 290px;
}

.img img {
   max-width: 100%;
   min-width: 100%;
   min-height: 100%;
}

这是我的jsfiddle： https ：//jsfiddle.net/23o81xrb/

正如你所看到的，.img的高度为290px，应保持这样，但是当我们缩小窗口时，图像不适应。 我希望在我的图像上有一个“缩放”，这样它们可以保持290px的高度并适应宽度。

抱歉我的“坏”英语，希望你明白。

任何帮助将不胜感激，谢谢。

Answer 1

如果你想在img标签中创建固定高度的缩放效果， 祝你好运 ！

但是，如果您使用图像作为背景，您可以修复高度，您可能会得到您想要的解决方案。 这是一个例子：

 .col-md-6 { width: 50%; float: left; } .img { overflow: hidden; position: relative; height: 290px; } .img.first { background-image: url('http://image.noelshack.com/fichiers/2016/16/1461065658-bvs.jpg'); background-position: center; background-repeat: no-repeat; background-size: cover; } .img.second { background-image: url('http://image.noelshack.com/fichiers/2016/16/1461065665-kfp3.jpg'); background-position: center; background-repeat: no-repeat; background-size: cover; } .img img { max-width: 100%; min-width; 100%; min-height: 100%; } 

 <div class="col-md-6"> <div class="img first"> </div> </div> <div class="col-md-6"> <div class="img second"> </div> </div> 

Answer 2

如果你使用img标签，use可以在CSS3中使用object-fit属性，如下所示：

.col-md-6 {
  width: 50%;
  float: left;
}

.img {
  overflow: hidden;
  position: relative;
  height: 290px;
}

.img img {
  max-width: 100%;
  min-height: 100%;
  object-fit: cover;
}

那应该可以解决你的问题。