0

I have a link to jsFiddle that will present the problem. Basically, the problem is in the middle container (sector2 the blue one) which flexes in column orientation and has 5 flex child elements. Inside four of these elements are images with the size of 150x150px. I have given the image-wrapper (class of every child element) to flex: 1, which means that the blue container should be divided into 5 equal height parts. Now I set the min-height: 100% of every image, which makes the height of the image to be as much as one part (child element) height is.

The problem arises when I want to maintain the aspect ratio of the image and set the object-fit: scale-down. This property makes the image preserve the aspect ratio, but the containers (image-wrapper) and the blue container (sector2) still hold the original image width of 150px.

My question is: how can I preserve the image aspect ratio and in the same time containers should auto resize based on the content?

I will additionally add the HTML and CSS code here:

.container {
      display: flex;
      flex-direction: row;
      width: 600px;
      height: 500px;
      background-color: red;
    }
    
    .sector1 {
      display: flex;
      flex-direction: row;
      flex: 1 0 0%;
      background-color: green;
    }
    
    
    .sector3 {
      display: flex;
      flex-direction: row;
      flex: 1 0 0%;
      background-color: green;
    }
    
    .sector2 {
      display: flex;
      flex-direction: column;
      flex: 0 0 auto;
      background-color: blue;
      margin: 0 6px;
    }
    
    .image-wrapper {
      display: flex;
      flex-direction: column;
      flex: 1 0 0%;
    min-height: 0;
        min-width: 0;
    }
    
    .image {
       object-fit: scale-down;
       min-height: 100%;
       width: auto;
    }
<div class="container">
    <div class="sector1"></div>
    
    <div class="sector2">
    
      <div class="image-wrapper">
        <img class="image" src="https://mk0powerpackele6qayu.kinstacdn.com/wp-content/uploads/2018/07/image-75-150x150.jpg" />
      </div>
    
      <div class="image-wrapper">
        <img class="image" src="https://mk0powerpackele6qayu.kinstacdn.com/wp-content/uploads/2018/07/image-75-150x150.jpg" />
      </div>
      
      <div class="image-wrapper"></div>
      
      <div class="image-wrapper">
        <img class="image" src="https://mk0powerpackele6qayu.kinstacdn.com/wp-content/uploads/2018/07/image-75-150x150.jpg" />
      </div>
      
      <div class="image-wrapper">
        <img class="image" src="https://mk0powerpackele6qayu.kinstacdn.com/wp-content/uploads/2018/07/image-75-150x150.jpg" />
      </div>
      
    
    </div>
    
    <div class="sector3"></div>
    </div>
Arshiya Khanam
  • 613
  • 6
  • 12
anchor
  • 755
  • 2
  • 8
  • 17
  • 1
    I do not clearly understand your problem you mean to say. how to increase the size of the image? – Arshiya Khanam May 29 '19 at 10:44
  • why not use object fit cover if you want to cover the whole box? – Pete May 29 '19 at 10:52
  • if you see the fiddle you will see that the height of the image is 100px, but the width is the original width of the image (150px). I want to make the container 100px to 100px i.e. width to be determened by the height of the picture. P.S I dont want to use cover, I want to use either scale-down or contain. – anchor May 29 '19 at 10:56
  • then you will have blue either side - if you use cover, you still maintain the aspect ratio, but get a bit of cropping. You cannot scale down without leaving blank space as your new image size does not match your original aspect ratio. If you are just wanting width to determine the height, then you have to use width:100% and height auto, but then you cannot use flex (which I don't see any need for anyway as all you have is a column of images) – Pete May 29 '19 at 11:18
  • 1
    you cannot, explained here: https://stackoverflow.com/a/54376890/8620333 .. object-fit doesn't change the layout, only the content inside the image – Temani Afif May 29 '19 at 11:35

1 Answers1

0

I changed the .image-wrapper to flex: 0 0 auto; and I believe it has your desired effect. Check to see if in this fiddle that I forked.

You previously had .image-wrapper at flex: 1 0 0%; which means the element started at 0 width and then grew to the size of the container. That method for determining size doesn't take the size of the elements inside into consideration. Therefore growing to the width of the container will create the blue space around the images.

Setting it to flex: 0 0 auto will determine the width based upon the size the elements inside need, hence auto. Having flex-grow at 0 will tell it not to grow past the size it needs and will not create the blue space.

Lou Bagel
  • 1,001
  • 8
  • 11
  • But in your fiddle, the images overflow the green container at the bottom. – Jeremy Thille May 29 '19 at 12:43
  • I updated to remove the `.container` height as this brings up a bigger point: if you are setting a height for the container and know how many items are in the container and their sizes/aspect ratios why not just set them to the appropriate height and have the containers flex around them? Seems you are over-complicating the code. What is changing size that needs dynamic response to? – Lou Bagel May 29 '19 at 12:58
  • Or try this: https://jsfiddle.net/gq4ocjdr/ where I only changed the CSS on the images. I think I understand what you are going for now but still feels like you are over-complicating. Can post as an answer if what you are looking for. – Lou Bagel May 29 '19 at 13:30
  • You should not remove the height. The mockup in the fiddle that I have presented is in fact a modal (popup) in my app that has width of 60% and height of 60%, which means that the width and height are relative and the images are in fact buttons and MUST NOT be cropped, stretch or overflow. I just want the sector2 to have width as much as images have when they are scaled down to fit. – anchor May 29 '19 at 13:48
  • The issue is the center column has nowhere to derive its width from as CSS it is very difficult to find ways to make an elements width dependent on its height. Side-note: you sure this design will look okay on mobile in portrait? If the modal is 60% of the screen/viewport's height then that is 60vh. You have 5 elements so 60 / 5 = 12. So set the images, image wrappers, or center section to a width of 12vh. – Lou Bagel May 29 '19 at 14:30
  • ...and sorry, that is a weird image and got mixed up on what the normal aspect was. When it was stretched it looked more normal to me and thought that was the correct aspect. – Lou Bagel May 29 '19 at 14:34