Question

我想要一个背景图像的div，它保持图像的纵横比，固定高度为500px，我不希望＆＃34;填充＆＃34;在那个div的背景上。这可能吗？

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

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

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

有人可以帮帮我吗？

Answer 1

您尝试实现的目标不仅仅是使用CSS，您可以使用JavaScript来检测图像的宽度，然后将div的宽度设置为相同。或者，您只需删除background-image属性，然后将图像作为img标记添加到HTML中。如果您这样做，则可以将div显示为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>

Answer 2

background-size: contain;将始终显示整个图像（不会切断任何内容），从而在垂直或水平方向留下一些空间。

另一方面，background-size: cover;将填充整个DIV ，其方式是图像的短边与DIV的长度或高度完全对应（取决于关系） DIV和图像之间的比例）和较长的一个在侧面或顶部和底部被切掉。

如果您不想要扭曲的图像，那么这些就是您的选择。

背景大小：包含

2 个答案: