WordPress主题(或任何主题，实际上)的最大图像宽度 [英] maximum image width for a wordpress theme (or any theme, really)

问题描述

在字按中，如果您上传图片，并使其以100％的比例显示:如果图片超出其容器宽度，则主题将为:

a)损坏，弄乱了页面的布局

或

b)隐藏它无法显示的多余宽度

这当然是用于非流体的布局.

此处介绍的解决方案:

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

  p img {填充:0;最大宽度:100％；}#header，#content，#footer，.widget {溢出:隐藏；} 

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

overflow:hidden 是为了使多余的部分消失吗?

好吧，这不是我想要的.

我正在寻找一种方法(最好是在CSS中):

如果图像太大，则使其为可用宽度的100％；

如果图像不是太大，请使其尺寸为原始尺寸.

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

edit:好吧，显然， max-width 样式应该可以达到预期的目的.但是在 Mystique主题中，wordpress的用户css无法正常工作，我无法弄清楚原因.主题本身就最大宽度采取的措施之间可能存在冲突.y.estamine.net/main/wp-content/themes/mystique/style.css<-我想在这里.

解决方案

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

  *根据主题的设计和样式表设置内容宽度.**用于设置图像和内容的宽度.应该等于主题的宽度*通常是通过style.css样式表设计的.*/如果(！isset($ content_width))$ content_width = 640; 

In word press, if you upload an image, and let it display in 100%: if it exceeds its containers width, the theme will either:

a) be broken, messing up the layout of the page

or

b) hide the extra width it cant display

This is for a non-fluid layout, of course.

The solution presented here:

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

what this does, apparently is just making sure the image is displayed under 100% of the width of the objected where it's nested in

And the overflow: hidden is to make the extra bit disappear?

Well, this is not what i am looking for.

I am looking for a way (in css, preferably) to do this:

If image is too big, make it 100% of available width;

If image is not too big, make it its original size.

I've been setting <img width="100%" to solve this problem, but this will bring up problems in a fluid layout, such as the possibility of enlarged images.

edit: Well, apparently, the max-width style should work for the intended purpose. But in the Mystique theme user css of wordpress it's not working, and i cant' figure out why. Probably a conflict between measures taken by the theme itself regardig max-width. y.estamine.net/main/wp-content/themes/mystique/style.css <- somewhere here, i think.

解决方案

The maximum content width should be set in functions.php. The example below is from Twentyten. This will prevent your large sized images from overflowing.

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

这篇关于WordPress主题(或任何主题，实际上)的最大图像宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！