最大宽度下的大图像拉伸单元: 98%

Question

在我半流质的论坛布局中，我遇到了一个奇怪的问题:帖子中的图片有时会拉伸页面，但有时不会。

我已经将图像设置为“最大宽度: 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 11上经历过这个问题，但在Google上没有。怎么回事？也许这和我的其他问题？有关

Answer 1

img 最大宽度表示为父元素宽度的百分比。

问题是父元素不包含，因为#table包装盒和它的两个子元素正在实现显示:表布局策略。

为了避免这个问题并保持布局响应性，我建议您删除那些显示:表声明并选择-as (一个例子-- 这里解释的模式之一 )

Answer 2

您的非拉伸图像的行为是这样的，因为它们被包装在不同的css标记下，并带有类的后期处理。然而，拉伸的一个包在bbcode_sshot的不同的css类中。以下是您的两幅图像的样子:拉伸：

<img class="postimage" src="/image file" alt=":)" title="image title" />

未拉伸

<span class="bbcode_sshot"><a href="http://i62.tinypic.com/2dtr90k.png" target="_blank"><img src="http://i62.tinypic.com/2dtr90k.png"/></a></span>

若要修复非拉伸图像中的拉伸，请删除bbcode_sshot类并添加后期类，或者为过度拉伸图像添加这两个类。

顺便说一句，如果你想要缩放图像，那么就使用这个简单的技术。

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