Develop Reference

FF max-width issue on div with inner img

I have block for images carousel, for example. I know nothing about picture sizes. I want to vertically and horizontally align images to center. One special thing is that i need wrapper above image, so i can set little plates with username. So i use max-width:100% and max-height:100% for center and middle aligning like this
How to vertically align an image inside div
So i have this code
.container{
position: relative;
width: 100px;
height: 100px;
border: 1px solid;}
.frame-wrapper{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
text-align: center;}
.frame {
/* equals max image height */
position:relative;
display: inline-block;
border: 1px solid red;
white-space: nowrap;
max-width: 100%;
max-height: 100%;
height: 100%;
box-sizing: border-box;
vertical-align: middle;}
.helper {
display: inline-block;
height: 100%;
vertical-align: middle;}
img {
vertical-align: bottom;
max-width: 100%;
max-height: 100%;}
<div class="container">
<div class="frame-wrapper">
<span class="helper"></span>
<div class="frame">
<span class="helper"></span><img src="https://dummyimage.com/50x200/000/fff" />
</div>
</div>
</div>
Problem appears when the image have height is bigger than container. When it happens picture oversize the wrapper and for fixing it I set height:100% to wrapper and picture fits inside it. What I am asking about here is that in FF browser when I set height: 100% to wrapper image is scales, but wrapper doesn't follow it and still have original width.
So you can open this in any browser instead Firefox and look how it must work
JS Fiddle if you want
http://jsfiddle.net/crazyboris/pd3v2kp8/1/
Do you have any ideas why is this happening?

It's because your .frame-wrapper doesn't have height and width specified being an absolute positioned container. Add:
height: 100%;
width: 100%;

How to adjust 100% height to include height of added element

I have a div that is added dynamically using JS that includes an overlay and a contained element that should scroll with the page as necessary (I don't want any scrolling to happen within that div, which resizes to fit the content). The overlay is set to width=100% and height=100% to cover the entire page. However, when the contained div ends up being taller than the viewport, this causes the overlay to stop short after the height of the viewport.
That explanation kind of sucks so probably easier to see what I mean, so here's a simplified fiddle:
http://jsfiddle.net/72SU5/
Here's the CSS I'm using:
#overlay {
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
position: absolute;
top: 0;
z-index: 20;
}
#overlay > div {
width: 100px;
border: 1px solid #ccc;
padding: 20px;
padding-bottom: 40px;
background: #eee;
margin: 50px auto;
}
My question is how I might have the overlay extend to 100% of the new height once the hidden content is shown. I'm fine using JS/jQuery to accomplish this.
Or, if there's a better pure-CSS approach that requires refactoring, I'm open to that as well. The only requirement is that the overlaying content scrolls with the page if the content causes it to extend beyond the viewport.

Add the following property to your #overlay CSS class:
overflow:auto;
Fiddle

You could also remove the height property from the #overlay class.
http://jsfiddle.net/72SU5/6/

#overlay {
width: 100%;
height: auto;
background-color: rgba(0,0,0,0.5);
position: absolute;
top: 0;
z-index: 20;
}
#overlay > div {
width: 100px;
border: 1px solid #ccc;
padding: 20px;
padding-bottom: 40px;
background: #eee;
margin: 50px auto;
}

Mixing a fixed PX siderbar with percentage based content

trying to create a new layout but have run into an issue.
Currently, i have a fixed sidebar to the left and then the content floated right.
The side bar has a width of 18%, and then the other content 82% width.
This works fine, but it looks ugly and is unstable at larger screen sizes.
I wish to however to make a change, and make the sidebar a fixed width. This poses a problem then on the other content which i want to take up the rest of the room.
How can i have the content to the right, to still take up the rest of the room whilst keeping a fixed sidebar?
Hope this makes some sort of sense!
Here is a js fiddle of the problem i face:
http://jsfiddle.net/Uyv6w/
And what i current do:
http://jsfiddle.net/Uyv6w/1/
Layout is like so:
<div id="container">
<div id="sidebar"></div>
<div id="content">
<div id="inner"></div>
</div
</div>

I guess I'm not exactly sure what you're looking for - but I tried with this FIDDLE.
I floated the major divs left, then just gave a min-width and max-width to the container.
Could you provide some more details?
CSS
html, body {
width: 100%;
height: 100%;
background-color: #333;
}
#container {
height: 100%;
min-width: 600px;
max-width: 1200px;
}
#sidebar {
float: left;
height: 100%;
width: 100px;
background-color: #9b59b6;
}
#content {
float: left;
width: 82%;
background-color: red;
overflow: hidden;}
#inner {
width: 80%;
margin-right: auto;
margin-left: auto;
background-color: gray;
height: 1000px;
padding: 10px;
}
img {
display: block;
width: 300px;
margin: 20px auto;
}

Alignment and resizing of various thumbnail images with fixed width and height container

I'm looking for an easy solution to implement the below. Thumbnails will not be cropped but the container they are in will always be the same height/width.
The idea is that images larger than the container would be responsive (ie. scale down), while images that are smaller than the container will be shown "as is."
The problem I'm having is three-fold:
How to handle the responsive element, since we need to account for various aspect ratios (ie. horizontal vs vertical vs square)
How to vertical align when necessary
Images that aren't larger than their container natively shouldn't scale up
Obviously, it would be great if this could be done with CSS only, but I understand javascript might be needed. If that's the case, I'm looking for a lightweight solution since the grid of thumbnails could get quite lengthy.
Any thoughts?

A pure CSS solution:
demo
.container {
display: inline-block;
position: relative;
width: 8em; height: 10em;
}
.container img {
position: absolute;
top: 50%; left: 50%;
width: auto; height: auto;
max-width: 100%; max-height: 100%;
transform: translate(-50%, -50%);
}
The images keep their natural size (width: auto; height: auto;) unless they are bigger than the container (max-width: 100%; max-height: 100%;), in which case they are going to take the size of the container that they exceed and scale the other one accordingly.
Positioning the images in the middle of the container: give them position: absolute and put their top left corner in the middle of the container (top: 50%; left: 50%;). Then translate them left and up by half their computed dimensions, whatever those would be (transform: translate(-50%, -50%);).
This solution works in browsers supporting 2D transforms. Sadly, this excludes IE8 and older and Opera Mini.
A better compatibility solution (that I cannot actually test right now in IE8, so I'm just assuming it should work there too) would be:
demo
.container {
display: inline-block;
width: 8em; height: 10em;
text-align: center;
white-space: nowrap;
}
.container img {
display: inline-block;
width: auto; height: auto;
max-width: 100%; max-height: 100%;
vertical-align: middle;
}
.container:after {
display: inline-block;
height: 100%; width: 0;
vertical-align: middle;
content: "";
}
First of all, give images display: inline-block;.
Set text-align: center; on container so that images that are less wide than the container get centred horizontally.
Now to make sure they are in the middle vertically as well. Give them vertical-align: middle;, but that's not enough. inline-block elements are vertically aligned with respect to their inline-block siblings and we have no siblings in this case. So we also need another middle vertically-aligned inline-block element that has the same height as the container. Or a pseudo-element on the container, it's the same thing.
This pseudo-element is going to have height: 100%; so that its vertical middle coincides to that of its parent and width: 0; so that it doesn't affect the horizontal alignment of the image (when the image's natural width < the container's width). It's also going to have display: inline-block; and vertical-align: middle; just like the image.
We also need white-space: nowrap; on the container to prevent the pseudo-element from moving below (and not affect the vertical alignment of the image this way) when the image occupies the entire width of the container.

This is actually the first question I asked on Stackoverflow! Now I know Ana has already come up with a working solution, I thought I'd also post mine that works IE8 onward:
http://jsfiddle.net/crtpq2jg/
Basic Markup:
<div class='container'>
<img src='http://www.lorempixel.com/100/200' />
</div>
CSS:
.container {
float: left;
width: 180px;
height: 210px;
text-align: center; /* to center align horizontally */
line-height: 210px; /* Equal to container height */
font-size: 0; /* This is to eliminate a weird ~2px vertical offset on the images. But you can just specify the font-size for any children elements that may contain text. */
}
.container > img {
width: auto; height: auto;
max-width: 100%; max-height: 100%;
vertical-align: middle;
}

This will work in IE 8 (demo)
Html from ana's answer
The trick is to use the after pseudo element to extend the containers line-height to its own height.
This way you can use regular text-align and vertical-align along with max-width and max-height.
.container {
display: inline-block;
position: relative;
border: solid .25em deeppink;
width: 8em;
height: 10em;
text-align: center;
vertical-align: middle;
white-space: nowrap;
}
.container img {
display: inline-block;
vertical-align: middle;
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
}
.container:after {
content: "";
display: inline-block;
vertical-align: middle;
height: 100%;
width: 0px;
}

Have a look at this jsfiddle: http://jsfiddle.net/jQN4L/
The max-width and max-height cause the image to scale down if needed, but not scale up. Horizontal centering is done with text-align. Vertical centering is done with line-height and vertical-align, although this method does require that the container has a known height.
HTML:
<div id="d1">
<img src="http://i.imgur.com/VAZNIev.jpg" />
</div>
<div id="d2">
<img src="http://i.imgur.com/VAZNIev.jpg" />
</div>
CSS:
img {
max-width: 100%;
max-height: 100%;
vertical-align: middle;
}
div {
text-align: center;
font-size: 0;
}
#d1 {
width: 200px;
height: 100px;
line-height: 100px;
background: red;
}
#d2 {
width: 100px;
height: 200px;
line-height: 200px;
background: green;
}

Changing my answer- should have read the question better!
html:
<div class="img_wrapper">
<img class ='full_width' src="1.png" />
<img class ='full_width' src="2.png" />
<img class ='full_width' src="3.png" />
</div>
css:
.img_wrapper {
width: 860px;
margin: 30px;
}
.full_width {
width: 200px;
height: 200px;
float: left;
margin: 10px;
vertical-align: middle;
}
.full_width img {
max-width: 100%;
max-height: 100%;
}

Dynamic scale down images while maintaining proportion

I'm trying to dynamically scale down variable portrait and landscape images to fit proportionally within a browser window.
My current image resizing attempt is here: http://jsfiddle.net/6pnCH/4/
I need the image already scaled vertically when the browser loads.
At the moment i only have it started to scaling when onBrowserResize is fired.
Also the image seems to be stretching and warping on resize and i need to keep them proportional.
Pretty sure Javascript is the key to solve this, but my knowledge of it is fairly limited so any help would be greatly appreciated.
Javascript Code:
$(window).resize(function(){
$('.slide img').css({
maxHeight: $('.slide').height() * 0.8,
maxWidth: $('.slide').width() * 0.8
});
});
CSS Code:
#slide {
text-align: center;
background-color: green;
height: 100%;
width: 100%;
display: inline-block;
}
.slide {
vertical-align: middle;
display: table-cell;
}
.slide:after {
content: ' ';
height: 100%;
display: inline-block;
vertical-align: middle
}
.slide img {
vertical-align: middle;
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
HTML Code:
<div id="slide" class="slide"><img src="image.jpg"></div>

Here is the updated Fiddle
You do not need to use Javascript this time.
You do not want to stretch the img so dont use width and height applied to it, look.
Only CSS still can do the trick:
#slide {
text-align: center;
background-color: green;
height: 100%;
width: 100%;
display: inline-block;
}
.slide {
vertical-align: middle;
display: table-cell;
}
.slide:after {
content: ' ';
height: 100%;
display: inline-block;
vertical-align: middle
}
.slide img {
vertical-align: middle;
max-width: 100%;
background-color: blue;
padding: 10%; //here is the trick
}

this illustrates perfectly what i was after and done without javascript after all!
http://codepen.io/jasonbradberry/pen/sHJhl
for anyone else after the same thing my amended code would look like this:
.slide img {
vertical-align: middle;
max-width: 100%;
max-height: 100%;
width: auto;
}

How about if you use css3 background-size: cover or background-size:contain ?
something like this:
<div style="width:100%; height:100%; background-size:cover; background-image:url(YOUR_IMAGE.jpg);"></div>