如何使用 CSS 在背景中拉伸和缩放图像
主题：HTML / CSS上一页|下一页
答案：使用 CSS background-size 属性
您可以使用 CSS background-size:cover; 仅使用 CSS 在背景中拉伸和缩放图像。 这会尽可能大地缩放图像，使背景区域完全被背景图像覆盖，同时保持其固有的纵横比。
但是，如果调整大小的背景图像的宽度或高度与元素相比过大，则图像的一部分可能不可见（垂直或水平裁剪）。
让我们尝试以下示例来了解此属性的基本工作原理：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Stretch and Scale Background-image with CSS</title>
<style>
.box{
width: 300px;
height: 300px;
background: url("images/avatar.svg") no-repeat;
background-size: cover;
border: 6px solid #333;
margin: 20px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>如果它对您不起作用，那么您可以尝试其他值，例如 background-size: contain;, background-size: 100%;, background-size: 100vw 100vh; 等。
有关详细信息，请参阅 CSS3 背景大小属性 的参考。
FAQ 相关问题解答
以下是与此主题相关的更多常见问题解答：
Advertisements