Auto-Image Fit

Question

I have a very strange problem that I tried to solve in the last 2 days to no avail. The page I am creating has the following structure:

I can easily get a shared parent AB layout with display: flex; flex-direction: column; align-items: stretch display: flex; flex-direction: column; align-items: stretch display: flex; flex-direction: column; align-items: stretch and setting A flex: 0 0 auto , and B - flex: 1 1 0; min-height: 100px; flex: 1 1 0; min-height: 100px;

However, I have a real problem with the layout of C and D inside B. I feel that flex / row is the right approach for B, but I just can't get the specifics. So I try:

 .B { display: flex; flex-direction: row; align-items: stretch; justify-content: space-between; } .C { flex: 1 1 0; } .D { object-fit: scale-down; } 

But this is clearly not enough. The image either does not zoom out at all, it scales, but it gets distorted or leaves a lot of space if I installed it also with flex: 1 1 0 with a minimum width.

Any ideas how I can achieve what I need here?

UPDATE: I tried putting jsfiddle here - https://jsfiddle.net/2gsrzwwq/3/ - but for some reason it won’t even honor height:100% on the parent. Regarding the installation of the image, I need the image to be reduced to the height of D div, and then reduced to the width of the D-block, just to contain the reduced image, and for block C to occupy the remaining width.

Answer 1

After a much bigger fight and another sleepless night, I came up with something like work. The victim that I had to make does not adjust the width of the image container and always sets half the width of the screen on it (note that in the real application there are no background colors, so this will not be so strange, there will probably be some additional space). I need to discuss this with the client, but I think I can convince them. Here is what I came up with:

https://jsfiddle.net/2gsrzwwq/6/

HTML:

 <div class="page"> <div class="A"> </div> <div class="B"> <div class="C"> </div> <div class="D"> <img src="http://res.freestockphotos.biz/pictures/10/10677-illustration-of-a-red-lobster-pv.png"/> </div> </div> </div> 

CSS

 div { box-sizing: border-box; } .page { width: 100%; height: 250px; border: solid 1px black; margin: 5px; background-color: lightYellow; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; } .A { background-color: lightPink; margin: 5px; flex: 0 0 50px; } .B { background-color: lightBlue; margin: 5px; flex: 1 1 0; min-height: 80px; display: flex; flex-direction: row; align-items: stretch; justify-content: space-between } .C { background-color: lightGreen; margin: 5px; flex: 1 1 0; min-width: 100px; } .D { background-color: lightGrey; margin: 5px; flex: 1 1 0; min-height: 50px; display: flex; justify-content: flex-end; } .D img { flex: 1 1 0; max-height: 100%; max-width: 200px; object-fit: scale-down; object-position: top right; } 

Answer 2

I myself struggled with the same problem:

Maximum possible image size and div extension to fill in the blank

I came up with the following solution, which I also provided as an answer to my question. See https://jsfiddle.net/wwhyte/vjLps7qs/ ; replace the image http://placekitten.com/1600/900 to see the behavior of the landscape.

CSS

  .container { width: calc(100vw); height: 100vh; overflow: hidden; } .top { height: 1.25em; background: yellow; } .innerCtr { height: 100%; overflow: hidden; } .left { height: 100%; background: red; overflow: hidden; } .right { max-height: 100%; max-width: 80%; background: blue; float: right; object-fit: contain; overflow: hidden; position: relative; top: 50%; transform: translateY(-52%) scale(0.95); } 

HTML:

 <div class="container"> <div class="top"> </div> <div class="innerCtr"> <img class="right" src="http://placekitten.com/1600/900"> <div class="left">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div> </div> </div> 

I think this is happening:

• In the correct class:
  • max-height, max-width and object-fit give me the necessary scaling.
  • float: right gives me the position I need. (I got this from an article I found yesterday, but now lost, I will edit this answer to provide attribution if I find it again).
  • The conversion is inspired by the article on vertical alignment at: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/ .
  • 95% scale improves image visibility.
• In left class height: 100% gives the size of the panel I want
• The inner class Ctr gives the parent object to calculate its height against
• The container class is suitable for the viewport in the browser window.

Even this is not entirely perfect. There is some strange interaction between the height of the upper bar and the height of the image, so that the image is pushed from the bottom of the display. The outstanding amount is less, but related to the height of the upper bar - I have not fully explored. If you remove the top bar, the CSS above will behave fine. I turned to this with a 95 percent scale and a slight adjustment for Y-transform, but it still does not behave exactly to the small size of the window - the image is not perfectly vertically centered. I thought setting height = calc (100vh-1.25em) in the container class could fix this, but it actually violates the vertical scaling of the image, so now it only scales horizontally. It was a completely unexpected behavior! But other than that, it meets my needs.