Какой стиль css написать для адаптивных изображений?

Question

[Николай Романов]

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

Нашел object-fit: contain

Но не то.

Comments

[Ankhena]

Есть max-width: 100%, есть object-fit, есть overflow и еще чего-нибудь.

Answer 1

[Александр Суханов]

Для картинок использовать:
max-width: 100%

Если у вас WP например, который вставляет картинку с ее размерами, можно использовать:

max-width: 100%
width: auto!important;
height: auto!important;

Comments

[WapSter]

Ужас какой

[Александр Суханов]

WapSter, Где?

[WapSter]

Александр Суханов, !important

[Александр Суханов]

Так картинка может как угодно вставляться, включая со стилями, а не с атрибутами height и width.
Ограничив ширину, ее растянет по высоте.

Вот width: auto!important; это лишнее....

----
!important - многие считают ужасом, но по мне так, удобная вещь на конечных вариантах.
например: color: #000!important;. Добавив такой класс к тексту, можно не беспокоиться, что его перебьет что то другое. И т.д.

[xonar]

Александр Суханов, По идеи использовать !imporant плохо. Так как при наличие нормальной вёрстки и правильно css, !imporant практически не нужен. Но, по поводу вордпресс варианта я скорее всего с вами согласен, там бывает без этого не обойтись.

[Ankhena]

Александр Суханов,

на конечных вариантах

нет возможности заглянуть в будущее и гарантировать что не будет еще изменений.

Добавив такой класс к тексту, можно не беспокоиться, что его перебьет что то другое.

Угу, беспокоится придется, когда как раз потребуется перебить.