CSS - Divs with same height, but different image heights

Question

Is there any possibility to have divs with same heights, which contains images with different heights? I cannot use height css attribute, because I don't know the heights.

* {
  box-sizing: border-box;
}

.magazine-items {
  width: 500px;
  display:flex;
  flex-flow:row wrap;
}

.magazine-item {
  width:33%;
  display: grid;
  grid-template-areas: "image image image"
                       "text text text";
  border: 1px solid red;
  align-content: flex-start;
}
.magazine-item img {
  width:100%;
}
.text{
  grid-area: text;
}
.img {
  grid-area: image;
}
.double-text {
  width:80%;
  margin:auto;
}

<div class="magazine-items">
 <div class="magazine-item">
  <div class="img">
   <img src="https://upload.wikimedia.org/wikipedia/commons/b/b7/800px-Islas_Coronado.cc.jpg" alt="">
  </div> 
  <div class="text">
   <p>Porovnání detailů designu série Elle a Effe</p>
  </div>
 </div>
 <div class="magazine-item">
  <div class="img">
   <img src="https://www.onlinekoupelny.cz/image/catalog/magazin/Level_small.jpg" alt="">
  </div>
  <div class="text">
   <p>Vyvážené linie s citem pro maximální funkčnost, zaoblené tvary a nadčasová elegance činí z řady Level jednu z nejoblíbenějších sérií značky Paffoni.
   Vyvážené linie s citem pro maximální funkčnost, zaoblené tvary a nadčasová elegance činí z řady Level jednu z nejoblíbenějších sérií značky Paffoni.Vyvážené linie s citem pro maximální funkčnost, zaoblené tvary a nadčasová elegance činí z řady Level jednu z nejoblíbenějších sérií značky Paffoni.</p>
  </div>
 </div>
   <div class="magazine-item">
    <div class="img">
      <img src="https://dummyimage.com/600x400/000/fff" alt="">
    </div> 
    <div class="text">
      <p>Vyvážené linie s citem pro maximální funkčnost, zaoblené tvary a nadčasová elegance činí z řady Level jednu z nejoblíbenějších sérií značky Paffoni.</p>
    </div>
  </div>
</div>

This is what I managed to do with flexbox and grid but it still don't know how to set same height for divs without knowing the size of images.

Any ideas? Thank you

Edit: This is my expectation: Edit2: I reformulate my question. Is there any chance to get the divs like in the picture without using javascript or fixed height?

@CharuMaheshwari yes, I can change entirely the html structure — Valentin Emil Cudelcu, Apr 11 '19 at 08:21

לבני מלכה · Answer 1 · 2019-04-11T08:58:47.730

0

Add fixed min-height to .img

* {
  box-sizing: border-box;
}

.magazine-items {
  width: 500px;
  display:flex;
  flex-flow:row wrap;
}

.magazine-item {
  width:33%;
  display: grid;
  grid-template-areas: "image image image"
                       "text text text";
  border: 1px solid red;
  align-content: flex-start;
}
.magazine-item img {
  width:100%;
}
.text{
  grid-area: text;
}
.img {
  grid-area: image;
  min-height: 250px;
}
.double-text {
  width:80%;
  margin:auto;
}

<div class="magazine-items">
 <div class="magazine-item">
  <div class="img">
   <img src="https://upload.wikimedia.org/wikipedia/commons/b/b7/800px-Islas_Coronado.cc.jpg" alt="">
  </div> 
  <div class="text">
   <p>Porovnání detailů designu série Elle a Effe</p>
  </div>
 </div>
 <div class="magazine-item">
  <div class="img">
   <img src="https://www.onlinekoupelny.cz/image/catalog/magazin/Level_small.jpg" alt="">
  </div>
  <div class="text">
   <p>Vyvážené linie s citem pro maximální funkčnost, zaoblené tvary a nadčasová elegance činí z řady Level jednu z nejoblíbenějších sérií značky Paffoni.
   Vyvážené linie s citem pro maximální funkčnost, zaoblené tvary a nadčasová elegance činí z řady Level jednu z nejoblíbenějších sérií značky Paffoni.Vyvážené linie s citem pro maximální funkčnost, zaoblené tvary a nadčasová elegance činí z řady Level jednu z nejoblíbenějších sérií značky Paffoni.</p>
  </div>
 </div>
   <div class="magazine-item">
    <div class="img">
      <img src="https://dummyimage.com/600x400/000/fff" alt="">
    </div> 
    <div class="text">
      <p>Vyvážené linie s citem pro maximální funkčnost, zaoblené tvary a nadčasová elegance činí z řady Level jednu z nejoblíbenějších sérií značky Paffoni.</p>
    </div>
  </div>
</div>

edited Apr 11 '19 at 08:58

answered Apr 11 '19 at 07:48

לבני מלכה

15,925
2
23
47

Like I said I cannot use height, because I don't know what images there are going to be. And the image must be using `img` tag :( I want to create a structure for adding images and text bellow the image. – Valentin Emil Cudelcu Apr 11 '19 at 07:54
can you set `height` to the wrap element(`.img`) It will be helpful if you post your wanted result as iamge – לבני מלכה Apr 11 '19 at 07:55
only for understund the result here is that what you want? – לבני מלכה Apr 11 '19 at 07:58
when I run your code I see the same result as in image? What browser do you use? – לבני מלכה Apr 11 '19 at 08:12
Mozilla Firefox :) – Valentin Emil Cudelcu Apr 11 '19 at 08:20
try to use `-ms-grid-...` – לבני מלכה Apr 11 '19 at 08:39
still not having the texts on same line – Valentin Emil Cudelcu Apr 11 '19 at 08:56
I wanted to try `min-height` too, but what is the images are all small? I will have for example images with 75px height and div with 250px. – Valentin Emil Cudelcu Apr 11 '19 at 09:41

score 0 · Answer 2 · answered Apr 11 '19 at 08:02

0

Can you use background-image instead of img? For example you can do like this.

.img {
    background: url(images/bg.jpg) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    width: 600;
    height: 400;
}

answered Apr 11 '19 at 08:02

user7393570

51
4

I cannot set the height of the image, because I dont know how big or sall it will be and I have to use `img` tag, because the user will add images using the `img` tag – Valentin Emil Cudelcu Apr 11 '19 at 08:09

coops · Answer 3 · 2019-04-11T08:40:05.513

If you're open to changing the image slightly, you can 'cover' a certain size with your image - so you can keep the img tag but make them look a little more consistent:

I've added a height: 150px and object-fit: cover to the image.

* {
  box-sizing: border-box;
}

.magazine-items {
  width: 500px;
  display: flex;
  flex-flow: row wrap;
}

.magazine-item {
  width: 33%;
  display: flex;
  flex-direction: column;
  border: 1px solid red;
}

.magazine-item img {
  width: 100%;
  height: 150px;
  object-fit: cover;
}

.double-text {
  width: 80%;
  margin: auto;
}

<div class="magazine-items">
  <div class="magazine-item">
    <div class="img">
      <img src="https://upload.wikimedia.org/wikipedia/commons/b/b7/800px-Islas_Coronado.cc.jpg" alt="">
    </div>
    <div class="text">
      <p>Porovnání detailů designu série Elle a Effe</p>
    </div>
  </div>
  <div class="magazine-item">
    <div class="img">
      <img src="https://www.onlinekoupelny.cz/image/catalog/magazin/Level_small.jpg" alt="">
    </div>
    <div class="text">
      <p>Vyvážené linie s citem pro maximální funkčnost, zaoblené tvary a nadčasová elegance činí z řady Level jednu z nejoblíbenějších sérií značky Paffoni. Vyvážené linie s citem pro maximální funkčnost, zaoblené tvary a nadčasová elegance činí z řady
        Level jednu z nejoblíbenějších sérií značky Paffoni.Vyvážené linie s citem pro maximální funkčnost, zaoblené tvary a nadčasová elegance činí z řady Level jednu z nejoblíbenějších sérií značky Paffoni.</p>
    </div>
  </div>
  <div class="magazine-item">
    <div class="img">
      <img src="https://dummyimage.com/600x400/000/fff" alt="">
    </div>
    <div class="text">
      <p>Vyvážené linie s citem pro maximální funkčnost, zaoblené tvary a nadčasová elegance činí z řady Level jednu z nejoblíbenějších sérií značky Paffoni.</p>
    </div>
  </div>
</div>

Charu Maheshwari · Answer 4 · 2019-04-11T10:01:22.410

0

.captions {
  width: 33%;
  border: solid 1px;
}

img {
  max-width: 100%;
}

.wrapper {
  display: flex;
  width: 100%;
}

@media (min-width: 780px) {
  .wrapper {
    max-width: 780px;
  }
}
.d-flex {
  display: flex;
}

<body>
  <div class="wrapper">
    <div class="captions">
      <img src="https://upload.wikimedia.org/wikipedia/commons/b/b7/800px-Islas_Coronado.cc.jpg" alt="">
    </div>
    <div class="captions">
      <img src="https://www.onlinekoupelny.cz/image/catalog/magazin/Level_small.jpg" alt="">
    </div>
    <div class="captions">
      <img src="https://dummyimage.com/600x400/000/fff" alt="">
    </div>
  </div>
  <div class="wrapper">
    <div class="captions">
      <p> This is for Div 1 </p>
    </div>
    <div class="captions">
      <p> This is for Div 2 </p>
    </div>
    <div class="captions">
      <p> This is for Div 3 </p>
    </div>
  </div>
</body>

edited Apr 11 '19 at 10:01

answered Apr 11 '19 at 08:31

Charu Maheshwari

1,583
1
8
9

Still cannot use the `height` value. What if one image is going to be bigger? Cannot have the same height for images. Need the same height for divs which contains the images. – Valentin Emil Cudelcu Apr 11 '19 at 08:52
I have removed the height from img. See if it serves you, – Charu Maheshwari Apr 11 '19 at 09:42
This is the first try I made, but now, how will you make this responsive? I need to have on responsive (image,text,image,text,image,text) – Valentin Emil Cudelcu Apr 11 '19 at 09:44
Images are still responsive. Its just the container which needs some adjustments. Made them. Please try now – Charu Maheshwari Apr 11 '19 at 10:02
Yes, but in this case you won't get the text below every image? In responsive you will get all images one-by-one and all texts one-by-one – Valentin Emil Cudelcu Apr 11 '19 at 10:21
Can you please illustrate the case you are trying to say, I am not able to interpret the scenario you are concerned with. – Charu Maheshwari Apr 11 '19 at 10:28

CSS - Divs with same height, but different image heights

4 Answers4

Linked