Question

是否可以用图像填充 div，使得至少一个图像尺寸为100％而另一个尺寸为div的宽度或相同尺寸，同时尊重图像的宽高比

示例可以使用类wide和tall，如下所示：

<div class="tall">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/ae/Klaproos.jpg/266px-Klaproos.jpg"/>
</div>

<div class="wide">
  <img src="https://groenevrijdag.files.wordpress.com/2013/11/klaproos2.jpg"/>
</div>

div {
  width: 400px; height: 400px;
  display: block;
  overflow: hidden;
  border-radius: 50%;
  display: inline-block;
}
div.tall img { width: 100%;  margin-top: -50%; }
div.wide img { height: 100%; margin-left: -50%; }

https://jsfiddle.net/7tuod6vu/

我正在寻找一种纯HTML + CSS解决方案，适用于响应式矩形（不一定是方形）div。由于这个特殊的原因，Javascript将是一个痛苦，因为人们需要确定每个调整大小的宽度或高度应该是100％。服务器端甚至不是一个选项。

是否存在纯HTML + CSS解决方案？

编辑从一开始就应该清楚这一点，抱歉:(我不是在寻找背景图像解决方案，因为它不允许base64-inhtml表示图像。此外，我认为背景图像在语义上与<img> s不同。

Answer 1

考虑使用CSS object-fit 属性。

5.5. Sizing Objects: the object-fit property

object-fit属性指定替换内容的方式   元素应安装在由其使用的高度和   宽度。

以下是两个值：



<强> cover

替换内容的大小可以保持其宽高比   填写元素的整个内容框。



<强> contain

替换内容的大小可以保持其宽高比   适合元素的内容框。

因此，使用cover，图像会保留其宽高比并覆盖所有可用空间。当然，这意味着大部分图像可能会在屏幕外被裁剪。

使用contain时，纵横比也会保持不变，但图像会缩放到适合框内。这意味着图像可能在左侧和右侧，或顶部和底部都有空格。

浏览器兼容性

撰写本文时，object-fit is not supported by Internet Explorer。有关解决方法，请参阅：

更多信息

Answer 2

以下是不使用背景图片且仅使用HTML和CSS的解决方案：http://codepen.io/anon/pen/JGGObQ

（在overflow规则中将visible更改为.container1以查看完整图片。其中的数字是原始尺寸（以像素为单位）。）

它在图片上使用position: absolute，并根据格式（两个类，如您自己建议的）top 或 left {{ 1}}将位置参考移动到（水平或垂直）中心，以及50%设置，将图像的位置参考点从该中心移回其自身大小的transform : translate，导致居中：

50%

.container1 {
  position: relative;
  float: left;
  margin-right: 50px;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid red;
}
img.landscape {
  position: absolute;
  width: auto;
  height: 100%;
  transform: translate(-50%, 0);
  left: 50%;
}
img.portrait {
  position: absolute;
  width: 100%;
  height: auto;
  transform: translate(0, -50%);
  top: 50%;
}

Answer 3

这不是确切的解决方案，但它可能是您可以尝试使代码工作的实现。这是一个例子：

由于你无法预测图像的宽高比，我会这样做：

<强> HTML：将div标记设置为'fill'：

<div class="fill"></div>

<强> CSS：这会将您的图像作为背景，并将其拉伸以适应div大小而不会失真。

.fill {
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-image:"path/to/image.jpg";
}

Answer 4

您可以将图像设置为div的背景，然后使用backkground-size:cover

https://jsfiddle.net/3x5x0v24/

使用符合纵横比的图像填充div

4 个答案: