Блог

Главная - Вопросы по программированию - Неравные высоты div

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

#javascript #html #css #layout

#javascript #HTML #css #макет

Вопрос:

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

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

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

 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.1amp;ixid=eyJhcHBfaWQiOjEyMDd9amp;auto=formatamp;fit=cropamp;w=934amp;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.1amp;ixid=eyJhcHBfaWQiOjEyMDd9amp;auto=formatamp;fit=cropamp;w=934amp;q=80" alt="">
    </div>
  </a>
</main>

Комментарии:

1. Почему эта фиксированная высота для обоих этих divs, когда вам нужно целое изображение?? чего именно вы ожидаете??

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

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

4. я хочу ограничить высоту и ширину изображения при изменении размера, например:preview.themeforest.net/item /…

Ответ №1:

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

 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.1amp;ixid=eyJhcHBfaWQiOjEyMDd9amp;auto=formatamp;fit=cropamp;w=934amp;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.1amp;ixid=eyJhcHBfaWQiOjEyMDd9amp;auto=formatamp;fit=cropamp;w=934amp;q=80" alt="">
    </div>
  </a>
</main>