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

Posted 2023-03-06

【中文标题】wordpress 主题（或任何主题，真的）的最大图像宽度

【英文标题】：maximum image width for a wordpress theme (or any theme, really)

【发布时间】：2011-04-11 19:13:18

【问题描述】：

在 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是为了让多余的位消失？

嗯，这不是我要找的。​​p>

我正在寻找一种方法（最好是在 css 中）：

如果图片太大，将其设为可用宽度的 100%；

如果图片不是太大，则将其设为原始大小。

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

edit：嗯，显然，max-width 样式应该可以用于预期目的。但是在 Mystique 主题 的 wordpress 用户 css 中它不起作用，我不知道为什么。主题本身对最大宽度采取的措施之间可能存在冲突。 y.estamine.net/main/wp-content/themes/mystique/style.css

【问题讨论】：

“如果图像太大”是什么意思？据我了解，“最大宽度：100%；”是最适合你的。

好吧，我可能错了。但是主题没有响应它，即使我只是留在 img max-width: 100% 部分。我打算在一个简单的文件中尝试这个。

'max-width'（没有任何 'overflow:hidden'）可以解决问题。当然，在现代浏览器中（没有 ie6）。

【参考方案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;

【参考方案2】：

将最大宽度设置为最大值对我有用。例如

div 
    width: 500px;
    height: 500px;
    border: 2px solid black;

img 
    max-width: 500px;
    max-height: 500px;

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

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

在 IE7/Chrome/Firefox 中测试

【讨论】：

如果您发布 .css 文件的链接，我们可以查看并找出答案。