具有固定高度的響應圖像

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

那應該可以解決你的問題。