Question

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

我已将图像设置为＆＃34; max-width：98％＆＃34;，期望将其缩小到父元素的宽度。但是，这有时只会发生;由于某种原因，在其他场合，图像会爆炸布局，我无法分辨原因。

从我所看到的情况来看，这两个页面都包含巨大的图像，但其中只有一个会拉伸布局，而另一个则会正确缩放。

使用此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%;
}

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

我在Firefox 30和Internet Explorer 11上以1920x1080的速度遇到此问题，但在Google Chrome上却没有。这笔交易是什么？也许这与我的other issue?

有关

Answer 1

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

问题是未包含父元素，因为 #tablewrap 并且它的2个孩子正在实施 display：table 布局策略。

为了避免此问题并维护您的布局响应，我建议您删除那些 display：table 声明并选择 - 例如 - one of the patterns explained here

Answer 2

你的非拉伸图像就是这样做的，因为它们被包裹在不同的带有postimage类的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类并添加postimage类，否则将其作为类添加为过度拉伸图像。

BTW如果你想缩放图像，那么使用这个简单的技术

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

尽管最大宽度，大图像拉伸元素：98％

2 个答案: