html - 图像在浏览器预览中质量下降

Question

如您所见，我的问题出在图像的浏览器预览上。

附件是我网站的原始图片和浏览器预览截图。

我用来显示图片的代码是:

HTML

<div class="pricebox col-lg-6 col-md-6 col-sm-6 col-xs-12 col-ss-12">
    <img src="assets/img/preturi/aerobic-nelimitat.png" class="img-pricebox img-responsive" alt=""/>
</div>`

CSS

.pricebox {margin-bottom:35px;}
.img-pricebox {width:100%; height:auto;}

图像的尺寸是 550px x 200px 排列在 col-6 网格中，足以显示我认为的任何显示。

我可以做些什么来提高质量？任何 CSS 解决方案，也许是特定的 Photoshop 渲染配置？

PS:另外，我的附件中的本地预览质量有点下降。

Answer 1

将图像的最大宽度设置为 100% 实际上可以解决问题。