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，应该保持这样，但是当我们缩小窗口时，图像不适合。我想要一个＆＃34; zoom＆＃34;在我的图像上，所以他们可以保持290px的高度，并适应宽度。

对不起我的＆＃34;坏＆＃34;英语，希望你明白。

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

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

Answer 2

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

ip address can be from 0.0.0.0 to 255.255.255.255

(((0|1)?[0-9][0-9]?|2[0-4][0-9]|25[0-5])[.]){3}((0|1)?[0-9][0-9]?|2[0-4][0-9]|25[0-5])$

(0|1)?[0-9][0-9]? - checking value from 0 to 199
2[0-4][0-9]- checking value from 200 to 249
25[0-5]- checking value from 250 to 255
[.] --> represent verify . character 
{3} --> will match exactly 3
$ --> end of string

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

具有固定高度的响应图像

2 个答案: