css - 背景大小 100% 如果需要更改纵横比？

Question

是否可以将背景图像设置为高度的 100% 和 div 的 100%？因此，如果 div 的纵横比发生变化，则图像纵横比也会发生变化。

这行不通:

  background-size: 100% 100%; 

这会剪切图像而不是改变其纵横比:

background-size: cover;

Answer 1

background-size: 100% 100%; 会填满整个区域(可能会改变图像的纵横比)。

请注意，background-size 位于 background 定义之后。

见片段:

.bgimage
{
  width: 100%; height: 200px;
  border: 1px solid red;
  background: url(http://upload.wikimedia.org/wikipedia/commons/4/46/Drazet%2C_a_black_feral_cat.jpg) no-repeat center center;

  background-size: 100% 100%;
}

<div class="bgimage">
  ...
</div>

图片来源:http://en.wikipedia.org/wiki/Black_cat#/media/File:Drazet,_a_black_feral_cat.jpg
作者:Ordog