图像在浏览器预览中失去质量

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％实际上可以解决问题。

Answer 2

  

550px x 200px排列在col-6网格中，足以让我觉得任何显示

对于屏幕分辨率1366作为宽度，我不认为550px col-6已足够，所以最好使用更高分辨率，例如700px宽度并再次检查