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
ŽoHo
ŽoHo12mo 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;
}
ŽoHo
ŽoHo12mo ago
This is good and how it should be always img height = to content height. The white below text is padding up to border.
No description
ŽoHo
ŽoHo12mo 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.
No description
ŽoHo
ŽoHo12mo ago
Ive tried almost everything and nothing managed to fix it...
vince
vince12mo 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
MarkBoots
MarkBoots12mo 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;
}
ŽoHo
ŽoHo12mo ago
I think that solves it. TY.
MarkBoots
MarkBoots12mo ago
no problem, good luck on the project!
Want results from more Discord servers?
Add your server