如何使CMS用户上传的图像响应？ （为所有图像设置最大宽度？）

Question

在给定的CMS用户中上传图片。为防止它们破坏页面，我使用css指定站点不同部分的最大图像宽度。

请考虑以下情况。

<div class='a' style="width:500px;">
<img src='' width="600px" height="900px">
<img src='' width="400px" height="600px">
</div>

div.a img {
max-width:500px;
height:auto!important;
width:100%!important;
}

div.a中的图像是响应式的，没有图像大于div的宽度。但是，小于宽度500px的图像会被拉伸到这个宽度。

如何获得小于500像素的响应式图像，但保持100％的自身尺寸（不是最大宽度为500像素）？

我能想到解决这个问题的唯一方法是使用jquery为div.a中的每个图像设置最大宽度。如果图像宽度大于500px，则其最大宽度将设置为500px。

我想要理智地检查这种方法，并想知道其他开发人员如何解决这个问题。也许最好将此问题解决为编辑器级别并让ckeditor为每个图像赋予最大宽度属性？

提前致谢，

Answer 1

我一直在使用Picture Fill取得巨大成功，特别是对于不支持媒体查询的浏览器。 https://github.com/scottjehl/picturefill