背景尺寸：包含

我想要一个带有背景图像的 div，保持图像的纵横比，固定高度为 500px，并且我不希望该 div 的背景上有“填充”。 这可以吗？

我可以获得一个具有固定高度和保持宽高比的背景图像的 div ：

  <div style="background: url(something.png) 50% 50% / cover #D6D6D6;background-size: contain;background-repeat: no-repeat;height:500px"></div>

这使得图像位于 div 中间（垂直或水平）居中，但为 div 的背景提供了一些填充...

有人可以帮我吗？

您想要实现的目标仅使用 CSS 是不可能的，您可以使用 JavaScript 来检测图像的宽度，然后设置图像的宽度div是一样的。或者您可以简单地删除background-image属性，而是将图像添加为img标记到您的 HTML 中。如果这样做，您可以显示div as inline-block这将负责制作div与图像的宽度一样宽。

body
{
  text-align:center;
}
div
{
  background-color:#666;
  display:inline-block;
}
div img
{
  height:500px;
}

<div>
  <img src="http://lorempixel.com/200/500" alt="">
</div>