Kevin Powell - Community•13mo ago

CSS grid and image

So im having issues with image behaviour in css grid. HTML and CSS code will be provided down but to explain: I have 2 columns in grid where one (containing img) is 35% width while other (content) is 1fr or 65% meaning rest of the grid width. Now when i resize dimensions to make it smaller using inseptor tool (responsive) it works as it should. The image witdh is 35% and its height is equal to height of content div. But when i expand the dimensions the image continues to expand and because of that makes the content div height bigger and bigger making white space in it. What I want is that height of image stops expanding and is equal to height of container div. Without setting fixed height since content div should be able to get or lose more elements so its height will be changed depending on the content that is rendered.

9 Replies

ŽoHoOP•13mo ago

HTML code

  <div className="grid">
      <figure className="figure">
        <img src={placeholder} alt="placeholder" className="img" />
      </figure>
      <div className="container">
        <p className="text">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod quaerat
          velit dicta neque maxime nulla, qui officia culpa itaque voluptatem
          libero quam architecto possimus ratione aliquam eveniet. Repellat,
          cumque ullam!
        </p>
        <p className="text">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod quaerat
          velit dicta neque maxime nulla, qui officia culpa itaque voluptatem
          libero quam architecto possimus ratione aliquam eveniet. Repellat,
          cumque ullam!
        </p>
        <p className="text">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod quaerat
          velit dicta neque maxime nulla, qui officia culpa itaque voluptatem
          libero quam architecto possimus ratione aliquam eveniet. Repellat,
          cumque ullam!
        </p>
      </div>
    </div>

  <div className="grid">
      <figure className="figure">
        <img src={placeholder} alt="placeholder" className="img" />
      </figure>
      <div className="container">
        <p className="text">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod quaerat
          velit dicta neque maxime nulla, qui officia culpa itaque voluptatem
          libero quam architecto possimus ratione aliquam eveniet. Repellat,
          cumque ullam!
        </p>
        <p className="text">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod quaerat
          velit dicta neque maxime nulla, qui officia culpa itaque voluptatem
          libero quam architecto possimus ratione aliquam eveniet. Repellat,
          cumque ullam!
        </p>
        <p className="text">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod quaerat
          velit dicta neque maxime nulla, qui officia culpa itaque voluptatem
          libero quam architecto possimus ratione aliquam eveniet. Repellat,
          cumque ullam!
        </p>
      </div>
    </div>

CSS code

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.grid {
  width: 100%;
  display: grid;
  grid-template-columns: 35% 1fr;
}

.figure {
  width: 100%;
  height: 100%;
}

.img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.container {
  border: 1px solid blue;
}
.text {
  padding: 30px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.grid {
  width: 100%;
  display: grid;
  grid-template-columns: 35% 1fr;
}

.figure {
  width: 100%;
  height: 100%;
}

.img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.container {
  border: 1px solid blue;
}
.text {
  padding: 30px;
}

ŽoHoOP•13mo ago

This is good and how it should be always img height = to content height. The white below text is padding up to border.

ŽoHoOP•13mo ago

This is bad. See the white below text. It is created due to img expanding and thus grid sets all column height to heighest column.

ŽoHoOP•13mo ago

Ive tried almost everything and nothing managed to fix it...

vince•13mo ago

Can you put this in a codepen? Images are a bit finnicky to get working the way you want them to so I'm not sure if I'll be able to help I've ran into your issue multiple times and I've always solved it with a background-image, but that isn't a great solution when the image is important to the content

ŽoHoOP•13mo ago

https://codepen.io/Spilaa/pen/dyaZVvL

MarkBoots•13mo ago

make the figure position relative and the image position absolute; that way the figure takes the size of the grid-cell, and the image adjusts to that.

.figure {
  position: relative;
  /* no need for width or height, the grid takes care of that */
}

.img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.figure {
  position: relative;
  /* no need for width or height, the grid takes care of that */
}

.img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

ŽoHoOP•13mo ago

I think that solves it. TY.

MarkBoots•13mo ago

no problem, good luck on the project!

Gaming

Programming

CSS grid and image