css - 如何在边界框中保持图像的纵横比 - CSS

Question

请原谅我在这里严重缺乏知识，如果我没有正确提及事情，我深表歉意。我在 Weebly 的一个网站上工作，但我在使用徽标时遇到了问题。我上传的图片很大，它的盒子只有 525 像素 x 200 像素。使用 CSS 中的以下信息，我只能获得徽标的上角。如何使图像调整到框的大小？谢谢你。

#logo{
float: left;
background: transparent url(logotransparent.png)no-repeat;
width: 525px;
height: 200px;
}

Answer 1

你有2个可能性：

background-size: cover;

或者

background-size: contain;

第一个将覆盖所有区域，剪切图像的某些部分。

第二个将使图像尽可能大而不剪切图像

两者都将保持图像的纵横比。