我使用 img 标签将图像插入到布局中。图像文件本身是高分辨率的。我需要图片
height: 48px;
width: 88px;
我在 CSS 中指定了这些样式。但是图片被压缩并且看起来很糟糕,并且对于其他图片,我指定的高度和/或宽度小于原始文件的高度和/或宽度,分辨率下降并且它们看起来“肥皂”。我应该怎么做才能使图片在不同分辨率下看起来不像肥皂?
在我的布局中,图像如下所示: [![在此处输入图像描述][1]][1] [1]: https://isstatic.askoverflow.dev/V71mI.png
虽然文件本身的分辨率为 300 * 185,即 比我需要的多。如果您没有在 CSS 中为 img 标签指定宽度和/或高度,则图像会查看其分辨率并在布局中占用比应有的空间更多的空间。
你不成比例地减小图片的大小,试试这个 -
img { display: block; max-width: 88px; height: auto }