1

嗨，我有一个基于我网站中屏幕高度和宽度的流体容器。我希望图像始终填充容器，因为它会根据屏幕尺寸向任何方向扩展。所用图像的大小和纵横比会有所不同。

我在下面尝试了 html 和 css：

div {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
  height: 80vh;
  width: 80%;
  background-color: red;
  position: relative;
  overflow: hidden;
}

img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-height: 100%;
  min-width: 100%;
  width: auto;
  height: auto;
  /*  max-width: 100%; // If used Image needs to be tall enough to fill div */
  /*  max-height: 100%; // If used Image needs to be wide enough to fill div */
}
<div>
  <img src="http://i.imgur.com/kOY2G57.jpg">
</div>

如果没有 max-height 和 max-width，如果 img 比容器小，这很有效，但如果图像以自然尺寸出现并被裁剪，则图像变大就不起作用。

jsfiddle 示例

是否可以仅使用纯 css 完成此任务？

更新 我也想避免使用背景图像作为解决方案，看看这是否可能只在 dom 中放置 img 标签，以便尽可能避免对 img 标签进行编程。

4

2 回答 2

0

而不是使用<img>标签，你可以只给<div>一个带有background-size: cover属性的背景图像。背景图像将保持纵横比，同时始终覆盖整个 div 容器。

<div></div>

div {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
  height: 80vh;
  width: 80%;
  background: red url("http://i.imgur.com/kOY2G57.jpg") center center;
  background-size: cover;
  position: relative;
  overflow: hidden;
}
于 2017-03-13T08:49:03.897 回答
-1

对图像使用object-fit以实现类似于 background-size 的相同结果cover，contain：

.imgFit {
    object-fit: cover;   /* cover, contain */
    display: block;
    width: 100%;
    height: 100%;
}

像这样使用：

<img class="imgFit" src="" alt="">
于 2017-03-14T10:38:54.023 回答