Question

您好我的网站上有一个基于屏幕高度和宽度的液体容器。我希望有一个图像随时填充容器，因为它根据屏幕大小向任何方向扩展。使用的图像大小和宽高比不同。

我已尝试使用下面的html和css：

＆＃13;

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 */
}

＆＃13;

<div>
  <img src="http://i.imgur.com/kOY2G57.jpg">
</div>

＆＃13;

如果没有max-height和max-width，如果img小于容器，则效果很好但如果图像以自然尺寸显示并且被裁剪，则图像会变大。

jsfiddle example

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

更新我还想避免使用背景图像作为解决方案，看看是否可以只使用dom中的img标签，以避免在可能的情况下编写img标签。

Answer 1

您可以只为<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;
}

Answer 2

响应时代为我们带来object-fit图片：

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

使用类似：

<img class="imgFit" src="" alt="">

流体容器内的流体图像改变纵横比

2 个答案: