Question

我有一个房屋清单数据库，其中包含每个条目的房屋图片。图像由第三方上传，并以随机宽度和长度发送图像。有些是正方形，有些是肖像，有些是风景等。不使用javascript，最好的方法是让图像完全填充一个确定大小的方形div（例如200px乘200px）。我认为使用图像作为每个div的背景图像并使用“display：cover”会很好但不确定任何浏览器兼容性问题或者可能有更好的方法。有什么建议吗？

Answer 1

如果兼容性是您关心的，那么这是给每个人提供体面体验的最佳方式：

div {
  background-position: 50% 50%;
  background-size: cover;
  width: 200px;
  height: 200px;
  overflow: hidden;
  position: relative;
}

img {
  position: absolute;
  max-width: 100%;
  max-height: 100%;
  left: calc(-2000px);
}

<div style="background-image: url(http://placehold.it/400x150)">
  <img src="http://placehold.it/500x200" />
</div>

基本上，使用background-size缩放可用范围，并将图像显示给不支持calc的所有浏览器。两只鸟，一石。

Answer 2

有几种方法可以做到这一点，但我更喜欢使用object-fit: cover，除了IE之外，所有主流浏览器都支持how to implement a fallback。如果您需要适用于IE和Edge的解决方案，可以查看{{3}}，或使用background-size: cover。

Answer 3

避免明确定义图像＆＃39;尺寸。而是使用它：

max-width: 100%;
max-height: 100%;

JsFiddle Demo

或如果您想使用background-image，请使用以下内容：

background-position: center center;
background-size: cover;

JsFiddle Demo

方框中的可变图像宽高比

3 个答案: