Kevin Powell - Community•2y ago

Make image same height as text, using CSS?

I have a flex-container with an image in one section, and text in the other. Is it possible to make these the same height? I don't want to use background-image instead, for accessibility purposes. And Javascript doesn't seem suitable since it would affect the loading speed https://codepen.io/markus-b/pen/dyKwwER

4 Replies

Unknown User•2y ago

Message Not Public

MarkBoots•2y ago

maybe something like this?

MarkBoots•2y ago

section{
  display:flex;
  gap:40px;
  max-width:900px;
  margin:100px;
}
section > * { flex: 1 }

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

section{
  display:flex;
  gap:40px;
  max-width:900px;
  margin:100px;
}
section > * { flex: 1 }

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

now both sections have same width (flex: 1) and same height (nature of flex) and the image is placed relative to it's container with object-fit

M.OP•2y ago

I was a bit unclear @pesahson 🙂 the image would be sized according to the text. @MarkBoots solution should work great, thanks!

Gaming

Programming

Make image same height as text, using CSS?