0

I have a container element (chocolate color on screenshot), that contains a grid of tiles 3x2. The tiles contains image element with 16/9 resolution image and some header and footer. The tiles span can be 1-3 with 4px gap in between. The image is set to object-fit:contain, The container element (chocolate color on screenshot) takes 100% width and height of parent (grey color), which causes, that the image tiles ratio do not matches the image ratio, and the image has bars around (blue aqua color on picture). I need to scale the container element (chocolate color), so its content will gets such dimensions, that the image element will perfectly fit.

Here is stackblitz. I've tried to play with the aspect-ratio of the image parent, which worked for medium sized resolutions, but not for small or big, then the image gets the aqua bars again.

For simplification, the stackblitz contains only one image element tile, which should perfectly fit into the chocolate element. You can ignore the grid inside the image.

https://stackblitz.com/edit/angular-ivy-xu92pf?file=src/app/app.component.css

Current (chocolate container takes 100% width and height from parent):

enter image description here

expected (chocolate container has width and height ratio, so that its image content 16/9 will perfectly fit. In real world, the image content will have not fixed w/h ratio):

enter image description here

niio
  • 326
  • 3
  • 15
  • What have you tried? Can you kindly create a code snippet? – phucbm Feb 12 '22 at 04:45
  • I added stackblitz with aspect-ratio css property, that I've tried, which worked somehow, but not in all resolutions. – niio Feb 12 '22 at 10:16
  • I got your code, can you provide an image or something to show your expecting result? There are just too many words from your question and I'm confused right now. – phucbm Feb 12 '22 at 10:34
  • I changed the description, and added expected result – niio Feb 12 '22 at 11:14

1 Answers1

1

Is this what you expected? The key is using align-items: flex-start; to make the .image-container float the top of its .parent.

.parent {
  display: flex;
  align-items: flex-start; /* Keep the child element float to the top */
  width: 330px;
  min-height: 250px;
  background-color: grey;
  padding: 8px;
}

.image-container {
  background-color: chocolate;
  /*aspect-ratio: 16/10, 5;*/
  /*this will be custom calculated from the content of image-container*/
  width: 100%;
  padding: 5px;
}

img {
  height: 100%;
  width: 100%;
  background-color: aqua;
  object-fit: contain;
  display: block; /* to make the image fill up its parent element */
}
<p>#1</p>
<div class="parent">
  <div class="image-container">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/image.png" />
  </div>
</div>

<p>#2</p>

<div class="parent">
  <div class="image-container">
    <img src="https://picsum.photos/200/80" />
  </div>
</div>

<p>#3</p>

<div class="parent">
  <div class="image-container">
    <img src="https://picsum.photos/200/300" />
  </div>
</div>
phucbm
  • 885
  • 6
  • 13
  • Thanks. The result is, what Im expecting, but does not works out of the box for my template. I still need to set either both w+h, or w | h + aspect-ratio in the template (for the container) , othervise the content of the container has 0 w | h, and is not visible. And if I set w | h or aspect-ratio, the flex you suggested is not working. – niio Feb 12 '22 at 13:24