CSS/HTML引入图片时显示畸变、压缩适配后画质模糊的问题求助

你不需要通过压缩原图像素的方式适配显示尺寸，按以下步骤调整即可同时保证尺寸正确、画质清晰：

1. 手动指定背景图的实际渲染尺寸 #

你当前写的CSS代码没有显式设置background-size参数，浏览器默认会直接按照图片的原始像素值映射为CSS像素渲染，这也是为什么会出现和你预期尺寸不符的放大问题。
直接在原有代码基础上补充对应尺寸设置即可：

.image{
    background: url(trya5.png) no-repeat 50% 70%;
    /* 这里的尺寸是你预期页面上实际要显示的CSS像素尺寸，也就是你源图原本的180px X 80px */
    background-size: 180px 80px;
}

这种方式完全不会损失图片画质，如果你的项目需要适配Retina高DPI屏幕，甚至可以直接使用2倍分辨率的高清原图（比如360px X 160px的无压缩版本），只需要把background-size设为你预期的一半显示尺寸，就能做到尺寸正确且画面更锐利。

2. 排除容器尺寸的视觉干扰 #

背景图本身不会撑开容器的大小，如果你没有给应用.image类的元素设置固定宽高，容器会被内部其他内容撑到比预期更大的尺寸，很容易让你误以为是背景图被放大了。
可以临时给这个元素加个border: 1px solid red的样式，直观确认容器实际的渲染大小是否符合预期。

3. 排查全局样式的覆盖问题 #

检查项目全局CSS里有没有类似* { background-size: cover; }这类通用重置规则，这类全局设置会强制把所有背景图拉伸适配容器大小，直接覆盖单类的样式配置，是开发中很容易忽略的尺寸异常诱因。 #

内容的提问来源于stack exchange，提问作者cody nemeth