Пользовательская сетка с изображениями

Поэтому я использовал библиотеки, такие как Bootstrap3, когда изучаю веб-разработку, но я хочу расширить свои знания в области веб-разработки, полностью понимая и имея возможность воссоздать некоторые вещи, доступные в начальной загрузке. В настоящее время я возился с настраиваемой сеткой и помещаю в нее изображения, которые останутся отзывчивыми. Проблема в том, что я хочу, чтобы все изображения были на одной высоте, независимо от размера изображений в моей строке. Ширина изображений точно такая, как я думал, но я не могу добиться такой же высоты (или хотя бы отрезать лишние изображения. Это мой Custom Grid CodePen, над которым я работаю. Я уже получил ответы в Google, но многие ответы на вопросы используют свойства background-image, которые я не использую, любая помощь будет буду очень признателен. Спасибо!

Изменить:

HTML

<div class="row">
    <div class="col-4">
      <img class="responsiveImage" src="https://source.unsplash.com/M8spMIQcg24">
    </div>
    <div class="col-4">
      <img class="responsiveImage" src="https://source.unsplash.com/U--hvQ5MKjY">
    </div>
    <div class="col-4">
      <img class="responsiveImage" src="https://source.unsplash.com/F3ePNdQb_Lg">
    </div>
  </div>

CSS

.row {
  position: relative;
  min-width: 100%;
}

.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

[class*="col-"] {
    float: left;
}

.responsiveImage {
  max-width: 100%;
  height: auto;
  padding-top: 30%;
}

html css grid-system
person demogorgon    schedule 18.07.2017    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Вы хотите, чтобы изображения заполняли соответствующие столбцы, но все имели одинаковую высоту?

Вы, конечно, можете добавить обтекатели вокруг изображений и сделать их height:200px и overflow:hidden. Но это не повлияет.

То, что вы хотите, если я правильно вас понял, невозможно сделать в CSS без использования flexbox или javascript. См. Этот код, который я беззастенчиво выбрал в Google: https://codepen.io/imohkay/pen/gpard < / а>. Или более подробный обзор: https://clearleft.com/posts/270

person phil    schedule 18.07.2017

arrow_upward
1
arrow_downward

Вам нужно будет указать желаемую высоту, а затем установить ширину изображения на auto, чтобы оно оставалось пропорционально масштабированным.

.responsiveImage {
  height: 300px;
  width: auto;
  padding-top: 30%;
}
person Blazemonger    schedule 18.07.2017