Html Img设置为最大宽度：100%发布是否大于实际图像大小？

这让我发疯。在我的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”，但每次都要这么做，真是太麻烦了！我做错了什么

谢谢！

---

丽贝卡

最大宽度：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="..." />

顺便说一句，您可以使用JavaScript和image.onload Event设置适合图像的自定义最大宽度。我想知道它是否将其设置为容器，但我找不到如何将其设置为图像本身的任何代码。我不知道如何使用JavaScript和image.onload事件来设置它。你有我可以看的链接吗？好的，我把它放到我的CSS里了。还有什么东西我需要上传到JavaScript文件中吗？或者这就是我所需要的吗？你不需要任何CSS。您必须在img元素中使用onload