CODEWITHSUNDEEP
htmlcsscss-grid
Sandra
Sandra

Reputation: 159

How to display image in css grid?

I am trying to make a css grid for photos but the img-element doesn't display the image in the grid item. There's nothing wrong with the url I am using since it works on other parts of the page but not in the grid system.

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 25px;
  grid-row-gap: 25px;
}

.wrapper > div img {
  max-width: 100%;
  max-height: 100%;
}
<div id="content">
  <div class="wrapper">
    <div><img src="https://placehold.it/100x100" alt=""></div>
    <div>Two</div>
    <div>Three</div>
    <div>Four</div>
    <div>Five</div>
  </div>
</div>

What am I doing wrong?

Upvotes: 4

Views: 21509

Answers (3)

ibrahimyanik
ibrahimyanik

Reputation: 332

You can set image width in wrapper class

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 25px;
  grid-row-gap: 25px;
}

.wrapper > div img {
  max-width: 100%;
}
<div id="content">
  <div class="wrapper">
    <div><img src="https://placehold.it/100x100" alt=""></div>
    <div>Two</div>
    <div>Three</div>
    <div>Four</div>
    <div>Five</div>
  </div>
</div>

Upvotes: 3

Dharmesh Vekariya
Dharmesh Vekariya

Reputation: 1146

Please Remove max-height from css.

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 25px;
  grid-row-gap: 25px;
  width:100%;
}
.wrapper > div img {
  max-width:100%;
}
<div id="content">
  <div class="wrapper">
    <div><img src="http://placekitten.com/1000/500"></div>
    <div>Two</div>
    <div>Three</div>
    <div>Four</div>
    <div>Five</div>
  </div>
</div>

Upvotes: 1

Hanif
Hanif

Reputation: 3795

It is happening for combination of two CSS properties. One is display: grid; in .wrapper selector and other is max-height: 100%; in .wrapper > div img selector.

Firstly you can avoid by remove max-height: 100%; from selector but if you need keep the max-height: 100%; property then you need to add display: block; in .wrapper > div img selector like following:

.wrapper > div img {
    max-width: 100%;
    max-height: 100%;
    display: block;
}

Upvotes: 2

Related Questions