Img设置为最大宽度:100%发布的图像大于实际图像大小

Question

这让我抓狂。在我的CSS中是这个代码

img {max-width:100%; height:auto; }

但当我上传一张图片到博客文章时，它是200x200

<img width="200" title="photo-Trent-Dysmid.jpg" style="width: 200px; float: right;" alt="photo-Trent-Dysmid.jpg" src="http://inboundmarketing.digitalhive.buzz/hubfs/jan-2016-images/photo-Trent-Dysmid.jpg" data-constrained="true">

然后预览博客文章，它将以798x798的价格发布，基本上达到博客页面的全宽。我能让它以正确的大小显示的唯一方法是手动将"宽度：200px"更改为"最大宽度：200px"，但每次都要拖动它真是太麻烦了！我做错了什么？

谢谢！Rebekah

Answer 1

max-width: 100%

百分比值将引用img元素所在容器的宽度，而不是图片本身！

示例：

<div style="width: 500px"><img src="..." style="max-width: 100%" /></div>

因此，如果容器的宽度为500px，img元素的最大宽度也将为500px

---

您可以使用JavaScript和image.onload事件设置适合图像的自定义最大宽度：

<img onload="this.style.maxWidth = this.width + 'px'" src="..." />