Question

在单词印刷中，如果您上传图片，并让它以100％显示：如果它超过其容器宽度，主题将：

a）被打破，弄乱了页面的布局

或

b）隐藏无法显示的额外宽度

当然，这是针对非流畅的布局。

此处提供的解决方案：

http://lorelle.wordpress.com/2006/10/07/the-battle-between-image-width-and-column-width/

p img {
    padding: 0;
    max-width: 100%;
}
#header, #content, #footer, .widget {
    overflow: hidden;
}

这样做，显然只是确保图像显示在嵌套的对象宽度的100％以下

overflow: hidden是为了让额外的位消失？

嗯，这不是我想要的。

我正在寻找一种方法（最好是css）来做到这一点：

如果图片太大，请将其设为100％的可用宽度;

如果图片不是太大，请将其设为原始尺寸。

我一直在设置<img width="100%"来解决这个问题，但这会在流畅的布局中出现问题，例如图像放大的可能性。

编辑：嗯，显然，max-width样式应该用于预期目的。但是在wordpress的 Mystique主题用户css中，它不起作用，我无法弄清楚原因。可能是主题本身所采取的措施之间的冲突最大宽度。 y.estamine.net/main/wp-content/themes/mystique/style.css＆lt; - 在某处，我想。

Answer 1

最大内容宽度应在functions.php中设置。以下示例来自Twentyten。这样可以防止大尺寸图像溢出。

 * Set the content width based on the theme's design and stylesheet.
 *
 * Used to set the width of images and content. Should be equal to the width the theme
 * is designed for, generally via the style.css stylesheet.
 */
if ( ! isset( $content_width ) )
    $content_width = 640;

Answer 2

将max-width设置为最大值对我有用。例如

div {
    width: 500px;
    height: 500px;
    border: 2px solid black;
}
img {
    max-width: 500px;
    max-height: 500px;
}

小提琴 http://jsfiddle.net/t29yV/

将其设置为百分比也有效......所以你可能还有其他事情发生。

在IE7 / Chrome / Firefox中测试

wordpress主题（或任何主题，真的）的最大图像宽度

2 个答案:

最大内容宽度应在functions.php中设置。以下示例来自Twentyten。这样可以防止大尺寸图像溢出。