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＆＃34;至＆＃34;最大宽度：200px＆＃34;但是每次都必须这么做！我做错了什么？

谢谢！利百

Answer 1

max-width: 100%

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

示例：

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

因此，如果容器的宽度为500px，则img-element的最大宽度也为500px

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

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

Img设置为max-width：100％发布大于实际图像大小？

1 个答案: