Как починить, съезжает изображение вправо?

Question

[bossigorxxx]

Парни, привет. Помогите с изображениями. travel.iticompany.ru/rossiya/ekskursii-rossiya/soc... В мобильной версии изображения съезжают вправо. Надо чтоб корректно и пропорционально выводило. Пытался уменьшить процент ширины в теге изображения. Не красиво выходит.

Answer 1

[Евгений]

Привет.
Можно сделать от 0px - 768px чтобы они были в одну строку.
Пиши в медиа запросе для изображений:
display: block;
height: 200px;
width: auto;
Это самое простое решение.

Comments

[bossigorxxx]

Тоже об этом думал. Наверное, так и сделаю. Хотя хотел прописать отдельную максимальную ширину и высоту на изображение. Но что-то маленькие они как-то получаются.

[Евгений]

bossigorxxx, Еще красивее на мой взгляд сделать фиксированную ширину с высотой и применить object-fit: cover, на всякий случай полифил подклюсить(ofi.js чтобы на cтарых боаузерах работало).
Если так сделать, то у тебя не будут пустые пространства в тех местах где идет 3 изображения подряд. И можео 2 медиа запроса уже прописать: отдельный для 768-480 примерно и отдельный меньше 480 и меньше.

[bossigorxxx]

.p img {
    max-width: 320px;
    height: auto;
    vertical-align: middle;
    border: 0;
    width: auto;
    display: block;
    text-align: center;
    margin: 0 auto;
}

Я вот на таком остановился под мобильный. На размер 768.

[Евгений]

bossigorxxx, Хорошо, только получается по 1ой картинке уже в одной строке, и пустое пространство образуется.
Я не помню что width: auto\9 означает, в chrome не работает.

[bossigorxxx]

width: auto\9 Я сам не знаю, откуда это появилось.

[Евгений]

Попробуй фиксированную ширину с высотой + jbject-fit: cover чтобы высота не автоматически высчитывалась и пустого пространста под 1ой у 3ей картинки не было.