0

Ситуация такая, что если экран уменьшить немного, например, просто окно браузера сжать или в мобильной версии, то изображения сжимаются непропорционально. Высота не изменяется, а по ширине сжимается и искажается. Необходимо, чтобы изображения сохраняли пропорции: если ширина изображения больше ширины контента, то высота должна меняться пропорционально, а если меньше, то размеры не должны меняться, т.е. маленькие не должны увеличиваться.

img {
    max-width: 100%;
    height: auto;
}
1
  • 1
    Этот код должен работать.
    – Qwertiy
    Commented 16 окт. 2019 в 16:46

1 ответ 1

1

*Если, конечно, у Вас правило правильное не перебивается какой-то иной инструкцией - ну, попробуйте !important задать - конечно, если у другой тоже нет этого и она не ниже нужной Вам...

Оставляете один параметр - другой подстроится сам.

img {
max-width: 700px
}

Или в контейнере, который и будет ограничивать img

img {
width: 100%
}

или

img {
    max-width: 100%
    }

А можно и так, чтоб уж с гарантией:

img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
  }

Картинки, вставляемые в посты на этом сайте, используют следущее правило:

.post-text img, .wmd-preview img {
    max-width: 100%;
    margin-bottom: .5em;
}

Или можно по-новому:

Есть два новых атрибута — srcset and sizes — позволяющих добавить дополнительные изображения с пометками, чтобы браузер выбрал подходящее.

<img srcset="elva-fairy-320w.jpg 320w,
             elva-fairy-480w.jpg 480w,
             elva-fairy-800w.jpg 800w"
     sizes="(max-width: 320px) 280px,
            (max-width: 480px) 440px,
            800px"
     src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">

Источник: https://developer.mozilla.org/ru/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

4
  • Если указывать width: 100%, то изображение не уменьшается. Commented 16 окт. 2019 в 16:19
  • Должно уменьшатся - с контейнером, а мах прото не дает ему стать больше его натурального размера. Попробуйте обернуть ваш img в div
    – Coder
    Commented 16 окт. 2019 в 16:20
  • 1
    !important был необходим. Commented 16 окт. 2019 в 18:11
  • )Рад, хорошо, что получилось!
    – Coder
    Commented 16 окт. 2019 в 18:14

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.