CSS div背景图像拉伸[关闭]答案

【问题标题】：CSS div background image stretches [closed]CSS div背景图像拉伸[关闭]
【发布时间】：2022-11-14 22:52:08
【问题描述】：

我有一个 div，它有一个背景图片。我希望图片占主体的 100%，高度为 500 像素，但图片会拉伸。如果图像被剪切，我没有问题。

.background {
  width: 100%;
  height: 500px;
  background-image: url('https://picsum.photos/1200');
  background-repeat: no-repeat;
  background-size: cover;
}

&lt;div class="background"&gt;&lt;/div&gt;

【问题讨论】：

当您在浏览器中检查它时，它是否仍然具有 background-size:cover; 属性 active ？
欢迎来到堆栈溢出！请访问help center，使用tour 了解内容和How to Ask。如果您遇到困难，请发布您尝试的minimal reproducible example，并使用[<>] sn-p 编辑器记录输入和预期输出。也从 CDN 添加相关框架

标签： html css

【解决方案1】：

提供的代码对于您想要的内容是正确的 - 必须有其他事情发生。你说的拉伸是什么意思？和

background-size:cover

图像将被裁剪以满足指定的尺寸。如果您不希望图像执行此操作，则应使用

background-size:contain

这将使它尽可能大而不会被裁剪

【讨论】：

【解决方案2】：

这里的 css 对我来说似乎是正确的。我相信这里的问题是图像的尺寸和类型。因为图像是jpg，如果您的 div 元素的尺寸大于图像，则会导致图像拉伸。我建议使用SVG根据正确的尺寸在代码中调整大小或调整要使用的图像大小时不受影响的图像。希望有帮助。

【讨论】：

【解决方案3】：

尝试使用带有 div 的 img-fluid 类 .. 如果您使用的是引导程序

【讨论】：

那里没有引导标签。
他也没有否认使用引导程序，所以可能是用户忘记或错过了标签，这就是为什么我提到他是否使用过引导程序
这是一种可能性，但这不是本网站的工作方式。