максимальная ширина изображения для темы WordPress (или любой другой темы) - PullRequest
Новая
       15

максимальная ширина изображения для темы WordPress (или любой другой темы)

2 голосов
/ 13 сентября 2010

В слове нажмите, если вы загрузите изображение и дадите ему отображаться на 100%: если оно превышает ширину контейнера, тема будет либо:

а) сломаться, испортить макет страницы

или

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%", чтобы решить эту проблему, но это вызовет проблемы с изменяющимся расположением, например, возможность увеличения изображений.

edit: Ну, очевидно, стиль max-width должен работать по назначению. Но в Mystique theme user css из wordpress это не работает, и я не могу понять, почему. Вероятно, конфликт между мерами, принимаемыми самой темой относительно max-width. y.estamine.net/main/wp-content/themes/mystique/style.css <- где-то здесь, я думаю. </p>

Ответы [ 2 ]

1 голос
/ 24 сентября 2010

Максимальная ширина содержимого должна быть установлена ​​в 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;
0 голосов
/ 13 сентября 2010

Установка максимальной ширины на максимальное значение работает для меня. Например 

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

Скрипка http://jsfiddle.net/t29yV/

Установка его в процентах тоже работает ... так что может случиться что-то еще.

Протестировано в IE7 / Chrome / Firefox

...