Отзывчивые изображения с помощью 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?

Ответы

Ответ 1

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

Работал для меня.
Спасибо за MrMisterMan за помощь.

Ответ 2

Используйте max-width на изображениях. Изменение:

.erb-image-wrapper img{
    width:100% !important;
    height:100% !important;
    display:block;
}

чтобы...

.erb-image-wrapper img{
    max-width:100% !important;
    max-height:100% !important;
    display:block;
}

Ответ 3

сначала проверьте изображения с помощью php, если он мал, а размер заставки для логотипа предоставить ему любой другой класс css и не изменять его размер

Я думаю, вам нужно заняться написанием сценариев между

Ответ 4

um реагирует просто

  • сначала создайте класс с именем cell, придав ему свойство display:table-cell
  • тогда @ max-width:700px do {display:block; width:100%; clear:both}

и что он не является абсолютным divs когда-либо; divs должен быть 100%, а затем max-width: - desired width - для внутреннего кадрирования. Истинные отзывчивые сайты имеют менее 9 строк css, которые передаются, что вы находитесь в мире дерьма и сложных вещей.

PS: reset.css таблицы стилей - это то, что делает css-шторы, была логическая причина, по которой они давали стили по умолчанию в первую очередь.

Ответ 5

лучшим способом, который я нашел, было то, чтобы установить образ, который вы хотите просмотреть, как фоновое изображение, и отправил свойство css для div как обложку.

background-image : url('YOUR URL');
background-size : cover

Ответ 6

Используйте max-width:100%; , height: auto; и display:block; следующим образом:

image {
    max-width:100%;
    height: auto;
    display:block;
}

Ответ 7

<style>
    body {
        background-image: url("http://media2.intoday.in/indiatoday/images/stories/vijay-story_647_062216110217.jpg");
        background-size:100vw 100vh;
        background-repeat: no-repeat; ;
    }
</style>