Kevin Powell - Community•2y ago

Is it possible to not overflow image in div with flex-grow?

As you can see from the codepen https://codepen.io/Lko3001/pen/bGxLRMX?editors=0100, I created a simple card with no specified height but with a max with and an aspect ratio, I inserted an image (with weird proportions i know) and I want it to take all the available space, but still keeping the card's aspect ratio the same, how can I do that? in the codepen, if you remove the image in the html, you can see the parent div and the image should not be bigger than that. I tried using overflow: hidden but didnt work, any suggestion?

1 Reply

lkoOP•2y ago

Fixed it with

.card {
  display: flex;
  padding: 2rem;
  transition-property: background-color, border-color, color, fill, stroke;
  transition-duration: 200ms;
  flex-direction: column;
  justify-content: space-between;
  aspect-ratio: 4/5;
  align-items: center;
  max-width: 24rem;
  border-radius: 0.5rem;
  gap: 2rem;
  outline: 1px solid black;
}

.wrapper {
  position: relative;
  background-color: red;
  width: 100%;
  padding-bottom: calc(100% * (5 / 4));
}

.img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: bottom;
  border-radius: 3rem;
}

.card {
  display: flex;
  padding: 2rem;
  transition-property: background-color, border-color, color, fill, stroke;
  transition-duration: 200ms;
  flex-direction: column;
  justify-content: space-between;
  aspect-ratio: 4/5;
  align-items: center;
  max-width: 24rem;
  border-radius: 0.5rem;
  gap: 2rem;
  outline: 1px solid black;
}

.wrapper {
  position: relative;
  background-color: red;
  width: 100%;
  padding-bottom: calc(100% * (5 / 4));
}

.img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: bottom;
  border-radius: 3rem;
}

Gaming

Programming

Is it possible to not overflow image in div with flex-grow?