KPC
Kevin Powell - Community•2y ago
M.

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
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
MarkBoots
MarkBoots•2y ago
maybe something like this?
MarkBoots
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.
M.•2y ago
I was a bit unclear @pesahson 🙂 the image would be sized according to the text. @MarkBoots solution should work great, thanks!
Want results from more Discord servers?
Add your server
More Posts
Changing value of first loop in a for loopI'm looping through an array of images and adding them to a carousel. The first image in the carouseGrid flex?I need to see if somebody could come up with a creative way to solve this >_< I have a feeling mightText decorationDoes anyone knows the logic of text decoration? And no, MDN article didn't help me. Trying to compaFeedback for ''FrontEnd Mentor'' beginner project that I recreated for practice!Website link: https://spontaneous-kulfi-5cfba8.netlify.app/ Edit: Might as well drop this project foPython in VSCode - extremely slow (how to fix?)When I'm writing JS or TS for non-web tasks, eg toy scripts I make for fun, I use VSCode TypeScript Isometric illustrations to explain a service blueprintWhat is the fastest and most efficient workflow to create flat isometric assets? Any tips? Particulahey!Could anyone please help me figure out the pattern in this code? I've been trying to figure it out bgood way to protect your email from bots and spammersgood article about protecting your email being placed on your site. https://css-tricks.com/how-to-React-Site navigation query#javascript If the site has to navigate by default, localhost:3000/abcd instead of localhost:3000 Best way to show this long tableHi there, i want to hear some ideas to implement this table in the website; it's a very very long ta