Kevin Powell - Community•3mo 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•3mo 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•3mo ago

snxxwyy•3mo 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•3mo ago

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

Gaming

Programming

restrain image height