WordPress 主题（或任何主题，实际上）的最大图像宽度

Question

在Word Press中，如果您上传图像并让它以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％；

如果图像不太大，则使其成为可用宽度

我一直在设置 来解决这个问题，但这会带来流体布局中的问题，例如放大的可能性图像。

编辑：嗯，显然， max-width 样式应该可以达到预期目的。但在 WordPress 的 Mystique 主题 用户 css 中它不起作用，我无法弄清楚为什么。主题本身就最大宽度采取的措施之间可能存在冲突。 y.estamine.net/main/wp-content/themes/mystique/style.css <- 我想在这里的某个地方。

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;
}

Fiddle http://jsfiddle.net/t29yV/

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

在 IE7/Chrome/Firefox 中测试