Неравная высота изображения CSS

У меня есть сетка из трех столбцов разной ширины, каждая из которых содержит элемент изображения.

введите здесь описание изображения

Структура по существу

<div class="row">
    <div class="col-3"><img></div>
    <div class="col-6"><img></div>
    <div class="col-3"><img></div>
</div>

Каждое изображение настроено на:

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

Каждый столбец также содержит padding-left и padding-right по 15px;

Однако это приводит к тому, что средний столбец col-6 оказывается выше двух других столбцов в строке.

Я попытался удвоить левое и правое заполнение для более длинного столбца col-6, но я не думаю, что это идеально, а также не работает быстро.

Я также пытался использовать flexbox безрезультатно.

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


html css visual-composer
person Marcus Christiansen    schedule 09.04.2017    source источник
comment
Можно ли сделать ручку или скрипку? следующие html и css не отображают изображение, которое у вас есть в вашем вопросе?   -  person repzero    schedule 09.04.2017
comment
Разве проблема не в том, что изображение в средней колонке имеет неправильный размер? Не могли бы вы решить эту проблему, сделав ее примерно на 10 пикселей короче?   -  person Andrew Myers    schedule 09.04.2017
comment
Учитывая визуальный ряд, кажется, что это действительно одно изображение, повторяющееся на большем. Установите фоновое изображение в CSS на div и, возможно, установите повторение true? background-repeat: repeat-x; background-image: url("http://www.example.com/bck.png");   -  person Mark Schultheiss    schedule 09.04.2017

Ответы (3)


arrow_upward
1
arrow_downward

Насколько я понимаю, в центре средней колонки есть логический желоб. col-6 не ровно в два раза больше ширины col-3. Скорее, это удвоенная ширина плюс ширина желоба (если бы вместо col-6 было два col-3).

Пример, показывающий отступ между каждым столбцом 3, который также должен быть включен в ширину столбца 6

Эта дополнительная ширина означает, что если вы просто возьмете размеры изображения col-3, а затем удвоите ширину, изображение должно будет расти, чтобы соответствовать немного более широкому пространству. Вот почему он торчит немного дальше.

Так что не беспокойтесь так о CSS. Просто используйте изображение правильного размера.

person Andrew Myers    schedule 09.04.2017

arrow_upward
0
arrow_downward

Почему бы вам не использовать эти изображения в качестве фона ваших div? В качестве фона вы можете использовать cover и эти изображения не повлияют на размеры div.

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

.div-with-bg {
    background: url(images/bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
person Raphael Parreira    schedule 09.04.2017

arrow_upward
0
arrow_downward

Это связано с предполагаемым изменением размера изображения в сетке начальной загрузки. Она имеет три возможных решения.

  1. сделайте размер изображения равным размеру сетки начальной загрузки путем обрезки.
  2. Используйте фоновые изображения в div с фиксированной высотой и шириной.
  3. Используйте динамическую библиотеку обрезки изображений, чтобы они были одинакового размера.
person kishan    schedule 09.04.2017