Kevin Powell - Community•6mo ago

restrain image height

Hey, I have a grid layout with an image and text. There's two rows, 100px and auto. I'd like the image to span the first row and the second, being the combined height of 100px and the height of the text, but i suspect since the row is auto it's using the images default height and being taller than i'd like, how would i get around this? Thanks in advance. https://codepen.io/deerCabin/pen/WNqGmGq

4 Replies

MarkBoots•6mo ago

add to your exsiting code

.image {
  position: relative;
}
.image > img {
  position: absolute;
  inset: 0;
}

.image {
  position: relative;
}
.image > img {
  position: absolute;
  inset: 0;
}

MarkBoots•6mo ago

snxxwyyOP•6mo ago

ah thank you, that's a neat method I assume background-image would also do the trick too? I’m just not sure if it’s more recommended to have the physical img tag?

clevermissfox•6mo ago

Depends if your inage is decorative or is providing necessary context to the content.

Gaming

Programming

restrain image height

Did you find this page helpful?