固定高度的响应图像 [英] Responsive Image with fixed height

问题描述

我想要具有固定高度的响应式图像.

i would like to have responsive image with a fixed height.

这是我的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/

Here is my jsfiddle : https://jsfiddle.net/23o81xrb/

如您所见，.img的高度为290px，应该保持不变，但是当我们缩小窗口时，图像将无法适应.我希望图像上有一个缩放"，以便它们可以保持290px的高度并可以调整宽度.

As u can see, .img has an height of 290px and that should stay like that, but when we reduce the window, images aren't adapted. I would like to have like a "zoom" on my image so they can keep 290px height and be adapted in width.

对不起，我的英语不好，希望您能理解.

Sorry for my "bad" english, hope u understood.

感谢您的任何帮助.

推荐答案

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

If you use img tag, use can use object-fit property in CSS3 as below :

.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;
}

那应该可以解决您的问题.

That should solve your problem.

这篇关于固定高度的响应图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！