【问题标题】:Set background image size using CSS without stretching [duplicate]使用CSS设置背景图像大小而不拉伸[重复]
【发布时间】:2020-01-06 09:01:21
【问题描述】:

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

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

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

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

【问题讨论】:

  • 请分享您的代码。 @ktiwari
  • 您希望如何在不拉伸(或压扁)图像的情况下调整图像大小?
  • 1210 x 1643180 x 200 没有相同的纵横比,所以当然图像会被拉伸。 180 x 244 会更近。
  • 1210x1643 不是比180x200 像素化程度更高,并且图像视图更好吗?对于获得更清晰图像的尺寸,您有什么建议?

标签: html css


【解决方案1】:

太棒了,

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

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

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

【讨论】:

  • 这是我的图像代码:background: url([[pix:theme|cat/default]]) no-repeat center bottom; background-size: 180px 200px; 使用背景大小,我尝试了百分比,包含和覆盖参数,但图像看起来仍然模糊
  • 你到底想达到什么目的?
猜你喜欢
  • 2016-04-02
  • 1970-01-01
  • 2013-08-15
  • 2012-09-02
  • 2017-06-19
  • 2016-06-06
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多