在给定的 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 中的每个图像设置最大宽度。如果图像宽于 500 像素，则其最大宽度将设置为 500 像素。
我想彻底检查这种方法，并想知道其他开发人员是如何解决这个问题的。也许最好在编辑器级别解决这个问题并让 ckeditor 给每个图像一个 max-width 属性？
提前致谢，