Resizing CSS images in a container for liquid lightboxes

Question

Short version . Make the image suitable for the visible area for small windows, starting with this fiddle p>

Update . There seems to be no solution to this problem. I thought there could be one thing because Chrome really makes this possible (see My answer), but the behavior in other browsers is different.

Longer version :

I am working on a light light lightbox and have, apparently, a simple CSS problem that I cannot solve.

I want the content (one image) to be reduced, if necessary, to fit, while maintaining the aspect ratio.

Here is a demo script: http://jsfiddle.net/3a9y9/2/ . Resize the window so that the image does not fit the height.

It almost works, but the height indicated on the image is slightly larger than what is actually visible, so the bit of the lower part is cropped. I tried setting things up to no avail; I would like to understand why the available height is too high.

This may be related, but IE 9 doesn't even support aspect ratio with this attempted solution. In addition, Chrome behaves strangely when you resize the window and clicking on run in the violin will sometimes redraw differently.

What's the solution?

There is no need to wrap the <img> in a <div> or two if necessary, but the top-level structure should ideally remain unchanged (i.e. .featherlight-content inside a .featherlight and what it is).

Answer 1

In my opinion, the easiest way to place an image in a container and focus is absolute positioning with margin: auto :

 .featherlight img { max-width:90%; max-height:90%; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; } 

( Fiddle )

Alternatively, you can try to set the image size in relative viewing units ( vw / vh ), now they have good browser support: http://caniuse.com/#search=vw

Answer 2

In featherlight.min.css change .featherlight-image{width: 100%} to .featherlight-image{max-width: 100%}

and at the end write the following css:

 @media only screen and (min-height:1000px) { .featherlight-image { height: 900px; } } @media only screen and (min-height:700px) { .featherlight-image { height: 600px; } } @media only screen and (max-height:700px) { .featherlight-image { height: 400px; } } 

What he does is change the width of the light box from a fixed 100% to 100% (so that it is adjustable in height). And then using @media the image height is limited. @media allows you to react based on the height of the browser.

In higher resolution browsers, an image with a height of 900 pixels will be displayed; those with a minimum height of 700px will show it at 600px, while smaller ones will show it at 400px.

You can, of course, customize the rooms to your preference; but this solution worked and solves the problem of long images.

Here's the jsfiddle . Please note that using data-featherlight="image" is important for proper operation.

Hope this helps.

Answer 3

Note The following is true only for Chrome, but it does not work in Firefox or IE ...

After much deliberation, my conclusion is that there is a fundamental difference in that the height and width are processed in general and that they affect the calculations here.

It is connected with the flow of things, for example, as reducing the width of a <div> will have the content flow downward, expanding the height, but as reducing the height of the <div> will not make it wider.

Trimming here is due to the fact that border-bottom and padding-top not taken into account at the available height. So the solution is to completely remove them.

If you still want a border, then you can fake it by adding an absolutely positioned <div> . Here is the corresponding violin.

Answer 4

You can try the following approach. Elements that have a width set become wider if they have padding and / or border-width . To avoid these problems, now use regular box-sizing: border-box; reset .

 *, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } 

The element can be centered by setting height: 100%; to the ghost element (it can be a pseudo-element) inside the parent and vertical-align: middle; for both.

 .featherlight { background-color: rgba(0, 0, 0, 0.8); bottom: 0; font-size: 0; left: 0; overflow: auto; padding: 0 5%; position: absolute; right: 0; text-align: center; top: 0; } .featherlight:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; } .featherlight-content { display: inline-block; margin: 5% 0; max-width: 100%; vertical-align: middle; } 

Images can be easily responsive by applying max-width: 100%; to the image max-width: 100%; and height: auto; so that it is beautifully painted in the parent element.

 .featherlight-content img { border: 25px solid #fff; display: block; height: auto; max-width: 100%; } 

See a real-time example: http://jsfiddle.net/cdog/AXzz8/ .

Answer 5

• It disconnects because padding disables it.
• This does not work in IE or Firefox because they do not assume that the height content of the div should be stretched to fit its height container. You will need to use height: 100% or some other percentage. This causes more problems when trying to reach max-height .
• It does not enlarge the image when the size increases in height , because in this way most browsers handle re-rendering the page (or not redrawing in this case) when the size of the viewport changes in height . You will have to redraw the page forcibly. The only CSS way I know how to do this is with CSS3 animations.

Here is a solution that doesn't work in Firefox or IE (so ... not so many), but it fixes clipping and resizing problems.

http://jsfiddle.net/SombreErmine/ENrnu/5/

It uses calc() and CSS3 animations; therefore, it is definitely limited in practical use. I do not post this as a solution. I mainly post it to share some information about what I learned. Hope this helps lead to a real solution.

HTML code:

 <div class="featherlight" style="display: block;"> <div class="featherlight-content"> <img src="http://placekitten.com/640/480" alt="" class="featherlight-image featherlight-inner"/> </div> </div> 

CSS code:

 .featherlight { position:fixed; top: 0; right: 0; bottom: 0; left: 0; text-align: center; background: rgba(0, 0, 0, 0.8); } .featherlight:before { /* position: trick to center content vertically */ content:''; display: inline-block; height: 100%; vertical-align: middle; margin-right: -0.25em; } .featherlight .featherlight-content { padding: 25px; position: relative; text-align: center; vertical-align: middle; display: inline-block; min-width: 30%; margin-left: 5%; margin-right: 5%; max-height: 95%; background: #fff; } .featherlight .featherlight-image { max-width:100%; max-height:calc(100% - 50px); vertical-align: bottom; -webkit-animation: render_update 1s linear 0s infinite; -moz-animation: render_update 1s linear 0s infinite; -o-animation: render_update 1s linear 0s infinite; animation: render_update 1s linear 0s infinite; } @-webkit-keyframes render_update { from { padding-bottom: 0.001px; } to { padding-bottom: 0px; } } @-moz-keyframes render_update { from { padding-bottom: 0.001px; } to { padding-bottom: 0px; } } @-o-keyframes render_update { from { padding-bottom: 0.001px; } to { padding-bottom: 0px; } } @keyframes render_update { from { padding-bottom: 0.001px; } to { padding-bottom: 0px; } }