Свойство max-width у изображений (для адаптивности)

Вопросы
Вопрос применительно «резиновых» настроек. Заметил, что если вставить изображение без выравнивания, то ему задается свойство max-width: 100%.
Но если использовать выравнивание, то этого свойства нет. Соответственно, при уменьшении окна браузера такая картинка обрезается (после момента превышения ею ширины контентной части).
Вопрос:
Можно ли как-то вычислить ширину вставляемого изображения в процентах (javascript?) и добавить ему свойство max-width: XX%? В данном случае размер картинки будет всегда пропорционален ширине контентной части.

9 комментариев

avatar
Я делал следующее (вам тоже может пригодится это решение):

$("div.topic-content img").each(function (i) { // подбираем размеры для картинок в контексте
    var a=$(this);
    var i = new Image(); // объект Картинка. 

    if (i.width > 600) { // если большая - растягиваем
        a.css("width","100%"); // устанавливаем ширину в 100% через CSS
	a.css("height","auto");
    }
});


i.width — это и будет реальная ширина картинки, которую вам надо вычислить. А дальше пляшите как нужно.
avatar
В вашем случае если картинка больше 600, то она растягивается на всю ширину. Для больших картинок — то что нужно.
А если, допустим, меньше, то надо i.width перевести в проценты (от «fluid_max_width»), а затем установить max-width с этими процентами. Как это можно сделать?
avatar
Ваша задача мне не совсем понятна.

надо i.width перевести в проценты
Картинка изначально всегда имеет размер 100% :) При этом вы ее вставляете в контент с теми размерами, которые требуется (width 100% или width 400px).

Либо уточните ваш вопрос, либо попробуйте все-таки маленькую картинку (с шириной менее 600) вставить с width 100%.
avatar
В данном случае размер картинки будет всегда пропорционален ширине контентной части.
Может просто для этого указать желаемую пропорцию, к примеру 1/3: width:33%?
avatar
Это уже фиксированное значение.
Я имею ввиду такую логику событий:
Если картинка более 600
— устанавливаем для неё width: 100%
Если нет (т.е. меньше 600)
— выравниваем её по левому краю для обтекания текстом (.text img[align=«left»])
— переводим её ширину в проценты и устанавливаем свойство max-width: XX%

Я попробовал firebug-ом — выглядит отлично (при изменении ширины окна браузера картинка ресайзится).

Попробовал найти пример здесь, но здесь не любят выравнивать картинки по краям :)
avatar
Логику событий я понял.

Не совсем понятно какую ширину вы хотите установить:
— переводим её ширину в проценты и устанавливаем свойство max-width: XX%
— ставите width:100%, и max-width в пикселях из i.width.

Это уже фиксированное значение.
не совсем так.
avatar
— ставите width:100%, и max-width в пикселях из i.width.
Тогда картинка не будет адаптивной. А если max-width в процентах, то картинка будет пропорциональна тексту. Попробовал проверить firebug-ом — вроде так и есть.
avatar
Т.е. для max-width процент будет такой:
— допустим ширина картинки (i.width) 200px
— ширина окна 1200px (как вытащить?)
— ширина контентной части 70% (берем из grid.css), вычисляем (как?) = 840px
— ширина картинки в процентах 23,8% (200 от 840)
— задаём max-width 23,8%

Не перемудрил? :)
avatar
Намудрил, конечно. Страшная у вас верстка и сложная.

— ширина окна 1200px (как вытащить?)
по-моему, document.body.clientWidth

— ширина контентной части 70% (берем из grid.css), вычисляем (как?) = 840px
jQuery. Вычисляется, к примеру, так $(«body .content»).width()

ну а дальше — арифметика.
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.