浏览器预览中的图像质量下降答案

【问题标题】：Images losing quality in browser preview浏览器预览中的图像质量下降
【发布时间】：2016-01-17 04:49:53
【问题描述】：

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

附上一张原图和我网站浏览器预览的截图。

我用来显示图像的代码是：

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：另外，我附件中的本地预览质量下降了一点。

【问题讨论】：

我看到的唯一区别是浏览器预览中的浅灰色边框。我还应该看到其他区别吗？
第二张图不清晰，文字有点模糊
是的，小文本也是灰色的，就像应用了一些不透明度一样。

标签： html css twitter-bootstrap responsive-design

【解决方案1】：

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

【讨论】：

【解决方案2】：

550px x 200px 排列在 col-6 网格中，足以满足我认为的任何显示

对于屏幕分辨率1366作为宽度，我认为550px对于col-6是不够的，所以最好使用像700px宽度这样更高一点的分辨率再检查一遍

【讨论】：

欢迎，请告诉我们它是否有效，希望它会