html – 具有固定高度的响应式图像

2023年7月29日 202次阅读

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

这是我的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的高度并适应宽度.

抱歉我的“坏”英语,希望你明白.

任何帮助将不胜感激,谢谢.

最佳答案 如果你想在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-b-v-s.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>
点赞