Адаптивные изображения с помощью CSS

Мне сложно изменить размер изображений, чтобы сделать их отзывчивыми.

Я разрабатываю приложение php для автоматического преобразования веб-сайта в адаптивную версию. Я немного застрял на изображениях.

Я успешно добавил класс-оболочку к каждому изображению на веб-сайте и могу -хорошо изменить размер изображений.

Моя проблема связана с изображениями, которые, естественно, меньше окна, такими как логотипы и значки. Я не хочу изменять их размер.

Мой код в настоящее время преобразует:

<img src="[src]" />

в:

<div class="erb-image-wrapper">
    <img src="[src]" />
</div>

Где я использую следующий CSS:

.erb-image-wrapper{
    max-width:90%;
    height:auto;
    position: relative;
    display:block;
    margin:0 auto;
}
.erb-image-wrapper img{
    width:100% !important;
    height:100% !important;
    display:block;
}

Это изменяет размеры всех изображений, но я хочу, чтобы изменялись только изображения, превышающие ширину страницы. Могу ли я добиться этого с помощью CSS?

43
задан Dan Hanly 31 July 2012 в 08:48
поделиться