改变宽高比的流体容器内的流体图像

Question

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

我尝试使用下面的 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>

在没有最大高度和最大宽度的情况下，如果 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 以获得类似于背景大小 cover、contain:

的相同结果

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

像这样使用：

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

改变宽高比的流体容器内的流体图像

fluid images inside a fluid container that changes aspect ratio

html

css

fluid-layout

fluid-images