尽管具有最大宽度，但大图拉伸元素：98％

debugcn 发表于 Dev

视频

在我的半流体论坛布局中，我遇到一个奇怪的问题，即帖子中的图像有时会拉伸页面，但有时却不能。

我将图像设置为“最大宽度：98％”，希望将其缩小到父元素的宽度。但是，这种情况仅在某些时候发生。由于某些原因，在其他情况下图像会爆炸布局，我无法说出原因。

从我的看到，两个页面都包含巨大的图像，但是只有一个页面可以扩展布局，而另一个页面可以正确缩放。

元素使用以下HTML代码进行结构化（示例）：

<div class="post">
    <div class="postbody">
        <div class="content">
            <img src="<source>" class="postimage" alt="Image">
        </div>
    </div>
</div>

同时遵循以下CSS规则：

.post {
    padding: 0.5rem 0.5rem 0.5rem 1rem;
    margin-bottom: 1.6rem;
    position: relative;
}

.postbody {
    padding: 0px 0px 3rem;
    width: 83%;
    float: right;
}

.postbody .content {
    font-family: Verdana,Arial,Helvetica,sans-serif;
    overflow-x: auto;
}

.postbody img.postimage {
    width: auto;
    max-width: 98%;
}

在上面的工作示例中可以看到更精确的代码视图。

我在1920x1080的Firefox 30和Internet Explorer 11上遇到此问题，但在Google Chrome上却没有。这是怎么回事？也许与我的其他问题有关？

安德里亚·卡拉罗（Andrea Carraro）

img max-width表示为父元素宽度的百分比。

问题在于父元素未包含，因为#tablewrap及其2个子元素正在实现display：table布局策略。

为了避免此问题并保持布局响应性，建议您删除那些display：table声明，并选择一个示例作为此处说明的模式之一

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。