使用CSS设置背景图像大小而不拉伸[重复]

Posted 2023-03-06

【中文标题】使用CSS设置背景图像大小而不拉伸[重复]

【英文标题】：Set background image size using CSS without stretching [duplicate]

【发布时间】：2020-01-06 09:01:21

【问题描述】：

我想使用 CSS 设置一些背景图片大小。

我可以使用以下 css 代码设置大小。我一直在 w3schools 阅读 css 格式，也参考了下面的*** post：

background: url([[pix:theme|cat/default]]) no-repeat center bottom; 
background-size: 180px 200px;

我已经尝试了所有方法，包括包含和覆盖。然而，我一直让图像被拉伸和模糊。如何在不模糊图像的情况下做到这一点？仅供参考，原始图像大小为128Kb 1210x1643px

【问题讨论】：

请分享您的代码。 @ktiwari

您希望如何在不拉伸（或压扁）图像的情况下调整图像大小？

1210 x 1643 和 180 x 200 没有相同的纵横比，所以当然图像会被拉伸。 180 x 244 会更近。

1210x1643 不是比180x200 像素化程度更高，并且图像视图更好吗？对于获得更清晰图像的尺寸，您有什么建议？

【参考方案1】：

太棒了，

您无法在不模糊或降低质量的情况下拉伸图像。 我建议您使用高质量的图像并将图像放在与背景色相匹配的 div 中。

然后您可以使用media-quires 或一些javascript 来保持图像尽可能大。

此外，查看您的一些代码或更好地描述您正在尝试做什么也会很有帮助。 :)

【讨论】：

这是我的图像代码：background: url([[pix:theme|cat/default]]) no-repeat center bottom; background-size: 180px 200px; 使用背景大小，我尝试了百分比，包含和覆盖参数，但图像看起来仍然模糊

你到底想达到什么目的？