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

Question

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

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

Answer 1

你有两种可能性:

background-size: cover;

或

background-size: contain;

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

第二个将在不切割图像的情况下使图像尽可能大

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