Неравные высоты - PullRequest
Новая
       16

Неравные высоты

0 голосов
/ 12 апреля 2019

Я хочу сделать неравные высоты изображения и сохранить размер при неизменном размере без изменения соотношения сторон изображения, вот что я хочу сделать: https://i.ibb.co/nkSXJ4f/Screen-Shot-2019-04-12-at-6-32-32-AM.png

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

Что я пробовал 

body {
  height: 100%;
}

.card {
  margin-right: 20px;
  margin-bottom: 2.6668rem;
  display: inline-block;
  vertical-align: top;
}

.medium {
  width: 65%;
  margin-right: 5%;
  height: 600px;
  overflow: hidden;
}

.small {
  width: 25%;
  height: 300px;
  overflow: hidden;
}

img {
  width: 100%;
}
<main class="grid">
  <a href="" class="card medium">
    <figcaption class="caption">project title</figcaption>
    <div class="card-image">
      <img src="https://images.unsplash.com/photo-1554565166-cafee0896506?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80" alt="">
    </div>
  </a>

  <a href="" class="card small">
    <figcaption class="caption">Kettle</figcaption>
    <div class="card-image">
      <img src="https://images.unsplash.com/photo-1554565166-cafee0896506?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80" alt="">
    </div>
  </a>
</main>

1 Ответ

0 голосов
/ 12 апреля 2019

Попробуйте этот код 

body {
  height: 100%;
}
*{
	box-sizing:border-box;
}

.card {
  margin-right: 20px;
  vertical-align: top;
  height:100vh;
  display: block;
  overflow: hidden;
}

.medium {
  width: 65%;
  margin-right: 5%;
    float:left
}

.small {
  width: 25%;
  float:left
}
.card-image { height:100%; }

.card-image img {
   width: 100%;
    height: 100%;
    object-fit: cover;
}
<main class="grid">
  <a href="" class="card medium">
    <figcaption class="caption">project title</figcaption>
    <div class="card-image">
      <img src="https://images.unsplash.com/photo-1554565166-cafee0896506?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80" alt="">
    </div>
  </a>

  <a href="" class="card small">
    <figcaption class="caption">Kettle</figcaption>
    <div class="card-image">
      <img src="https://images.unsplash.com/photo-1554565166-cafee0896506?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80" alt="">
    </div>
  </a>
</main>
...