Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > сохранит пропорции картинки <img>

Автор: GELEAF 8.12.2010, 17:58

как сохранит пропорции картинки <img> при не совпадении размеров ?

Автор: FightInGlory 8.12.2010, 18:17

Код


div{
    height:50px;
    overflow:hidden;
    text-align:center;
    width:50px;
    display:table-cell;
    vertical-align:middle;
}
img{
    width:50px;
    max-height:50px;
}

<div>
    <img src="test.png" alt=""/>
</div>

Надеюсь вам это подойдет.

Автор: GELEAF 8.12.2010, 22:35

Спасибо ) но нашел более изящный способ...достаточно задать только только один размер, ширину или высоту и пропорция сохраняется ))

Автор: FightInGlory 8.12.2010, 23:19

Нет, вы не совсем правы, способ который привел я позволяет любую картинку, большего или меньшего разрешения удерживать в контейнере соблюдая пропорцию, в то время как указав просто ширину вы не будете никогда увереныЮ что ваш блок не разъедится, т.к. высотка картинки может быть любой. Вот пример поставьте вашей картинке ширину 500 пикселей и создайте в фотошопе картинку шириной 500 и высотой в 2000 пикселей, как ваш способ сожмет картинку? Никак.

Автор: html5coder 9.12.2010, 09:17

Если задать только один размер, то Google Chrome и Safari (браузеры на движке WebKit) вытягивают картинку ну очень не пропорционально, так что такой способ не подойдет, если нужна кроссбраузерность.

Автор: FightInGlory 9.12.2010, 10:38

Немного подправил свой код, теперь работает во всех ослах начиная с 5.

Код


div{
    height:50px;
    width:50px;
    text-align:center;
    display:table-cell;
    vertical-align:middle;
}
img{
        width:50px;
    max-height:50px;
    height:auto !important;
    height:50px;
}

<div>
    <img src="test.png" alt=""/>
</div>

Автор: GELEAF 9.12.2010, 16:13

Спасибо ) сейчас попробуем )