Develop Reference

How to set min-height and max-height equal to window Height

I able to set a div height as min-window height but can't set max-height as windowHeight similar way. Here is the code
$(document).ready(function() {
function setHeight() {
windowHeight = $(window).innerHeight();
$('.sidebar').css('min-height', windowHeight);
};
setHeight();
$(window).resize(function() {
setHeight();
});
});

You don't need javascript nowadays to do that. Pure CSS is sufficient (and just height would be enough as well since you want to set min-height and max-height to the same value):
.sidebar {
height: 100vh;
}
vh is a relative unit referring to the height of the viewport. And it even works when resizing the window. Btw, same goes for vw which is the width of the viewport.
More information on the set of relative units and its browser support (as proposed by comments).

If you want both the min-height and max-height to be the size of the window why dont you just forgo the mins and maxs and just set the height itself?? You are pretty much bang on with your code however I would structure it a little differently. Are you loading the jQuery library?
$(document).ready(function() {
setHeight();
});
$(window).resize(function() {
setHeight();
});
function setHeight() {
windowHeight = $(window).innerHeight();
$('.sidebar').css('height', windowHeight);
console.log(windowHeight);
}
This will make the sidebar 100% of the screen height on load and on screen resize.
Alternatively if you are trying to make a page a tablet style web application you can achieve this 100% sidebar with css alone
html,body {
width: 100%;
height: 100%;
overflow:hidden;
}
.sidebar {
height: 100%;
/*set overflow-x + y to scrolls if you have a lot of content*/
}
this will give you the same effect without any javascript/jquery
http://jsfiddle.net/kdwnk2ax/1/

You can try this
$('.sidebar').css({
"max-height": windowHeight+"px",
"min-height": windowHeight+"px"
});
Demo http://jsfiddle.net/9kkukk2s/

How to resize an image that has a gradient according to the current page height?

I am using an image as the background for my site. It has a black/white gradient, and is 1px wide.
The CSS:
background-image:url('../image/gradient.png');
which makes it repeat itself. The height of the image is 2000px.
Is it possible to change the height of the image dynamically, so it fits all page sizes: If the height of a page is less than 2000px, the height of the image should be smaller, if the height of the page is bigger, the image should be bigger.
Thanks in advance
I have tried various in-browser gradient techniques, and they dont seem to work the same on all browsers.

I usually approach this problem in one of two ways.
If you can use CSS3, then use CSS gradients (I always find http://colorzilla.com/gradient-editor/ a good choice to play about with gradients), you can then set this to be 100% height of the window.
If CSS3 isn't an option, i usually just pick a height, say 500px, and make a gradient for that. Then, since gradients typically go from colour A to colour B, just set the underlying background colour to match colour B and the gradient will work similarly on all monitors.
Assuming a gradient going from blue to black:
body {
/* ensure body always fills viewport */
min-height: 100%;
/*gradient fades to black so set underlying BG to black*/
background: url(/path/to/gradient.gif) repeat-x #000;
}
}

Maybe am not getting the right context of your question, but this can be do it easily with somethin like
#SomeImg.src {
width: 100%;
position: absolute;
top: 0;
left: 0;
}
Resize this page to see it action: http://css-tricks.com/examples/ImageToBackgroundImage/

With CSS3 you can use background-size: cover and there are some other techniques discussed here.

You could create several images with varying heights and dynamically match the closest image size. If you do this you'd need to tie into the window.resize event to update the image if the user resizes the window.
window.onload = setBackgroundImage;
window.onresize = setBackgroundImage;
function setBackgroundImage() {
var winH = 500;
if (document.body && document.body.offsetWidth) {
winH = document.body.offsetHeight;
} else if (document.compatMode=='CSS1Compat' && document.documentElement && document.documentElement.offsetWidth ) {
winH = document.documentElement.offsetHeight;
} else if (window.innerWidth && window.innerHeight) {
winH = window.innerHeight;
}
if (winH > 400) {
document.body.style.backgroundImage = "url('../image/gradient800px.png')";
} else if (winH > 800) {
document.body.style.backgroundImage = "url('../image/gradient1000px.png')";
} else if (winH > 1000) {
document.body.style.backgroundImage = "url('../image/gradient1500px.png')";
} else if (winH > 1500) {
document.body.style.backgroundImage = "url('../image/gradient2000px.png')";
} else {
document.body.style.backgroundImage = "url('../image/gradient400px.png')";
}
}
I don't think the solution is very pretty, but it should work.

How do I get dynamically fluid images depending on browser window aspect ratio?

This might not be a simple question, but I try my best.
I have this example site: http://lotvonen.tumblr.com/
I have a little piece of javascript that automatically calculates the height of the inner browser window and sets that number as image wrapper div's height. Height of the image inside the wrapper is 100% of the wrapper, so that I get nice, full screen images on all normal screen sizes.
This works wonderfully on screens that are more wide than tall (desktops, laptops, etc).
But!
With screens that are more tall than wide (smartphones, iPads etc), the images get clipped from sides. I don't want that, so I have a temporary solution to have media query assigning height to auto and width to 100%, when browser screen max-width is 1024, so that no clipping occurs. But it's not a very good solution, and breaks at certain resolutions. It also destroys my JS with lower resolutions (eg. 800x600).
Here's the JS:
<script type="text/javascript">
var elems = document.getElementsByClassName('img'),
size = elems.length;
for (var i = 0; i < size; i++) {
var img = elems[i];
var height = (window.innerHeight) ? window.innerHeight: document.documentElement.clientHeight;
img.style.height=(height)+'px';
}
</script>
and here's my CSS:
.img {
max-width:100%
}
.img img {
width:auto;
}
.img img {
height:100%;
}
#media only screen and (max-width: 1024px) {
.img {
height:auto !important;
}
.img img {
height:auto !important;
max-width:100%;
}
and here's the div:
<li><div class="img"><img src="{PhotoURL-HighRes}" alt="{PhotoAlt}"/></div>
How do I get it so, that when the browser window is more tall than wide (eg. 720x1024), the images adjust by width, and when the browser window is more wide than tall (eg. 1024x720) the images adjust like they do now (by height, with the JS).
Is this possible at all? Is there a simple CSS fix to this or do I need to mess more with JS?
Thanks in advance!

You could also get the aspect in javascript on a regular basis and then add a class to the body object that would specify if it was 4:3, widescreen, or portrait. Then make it run on an interval in case the window changes size.
Example
CSS
.43 img { width: auto; }
.widescreen img { width: 100%; }
.portrait img { height: 100%; }
JavaScript
var getAspect = function(){
var h = window.innerHeight;
var w = window.innerWidth;
var aspect = w / h;
var 43 = 4 / 3;
var cssClass = "";
if (aspect > 43) {
cssClass = "widescreen";
}
else if (aspect === 43) {
cssClass = "43";
}
else {
cssClass = "portrait";
}
$("body").addClass(cssClass); // Using jQuery here, but it can be done without it
};
var checkAspect = setInterval(getAspect, 2000);

I would suggest getting the aspect ratio first in javascript. Use window.innerHeight and windows.innerWidth, and make the necessary division. Then, make this a condition. When the screen in wider than its height, set the image in css to width: 100%. Otherwise, set height: 100%.

Render images at a standard size without stretching, with a minimum size

I need to render profile images in a grid of exactly 101x155 each.
Some images are too small, some too big, most are not the right aspect ratio.
How do I show the img with a minimum width and height, no distortion, and show the exact size I want?

Without actually modifying the images, you have a few options available to you.
img { max-width: 101px max-height: 155px }
this will make sure that the images don't go above the 101x155px wide. Because they aren't the perfect aspect ratio there still will be whitespace on the sides of the image if the aspect ratio isn't perfect.
Another way would be to encase them in a container
<div><img .../></div>
div {width: 101px; height: 155px; overflow: hidden}
img {width: 101px;} /*or do height: 155px)*/
This isn't perfect but it gives you a different result. This will require the images to be either taller or wider for all images.
The best way would be to resize, but I know we can't always have our way :)

How about some jQuery? If you just include the <img> with class="grid-img":
$(".grid-img").each(function(i){
var width = $(this).width();
var height = $(this).height();
var ar = height/width;
if(width > 101) {
var newWidth = 101;
var newHeight = 101 * ar;
} else {
var newHeight = 155;
var newWidth = ar / newHeight;
}
$(this).height(newHeight);
$(this).width(newWidth);
});
what this should do is: if the image's width is too big, resize it based on the width (maintaining aspect ratio). if not, resize it based on height (again maintaining AR).

Dynamic Image Resizing

I have an image on a webpage that needs to be stretched to fit the available space in the window whilst maintaining its proportion. Here's what I've got:
http://www.lammypictures.com/test/
I would like the large image to proportionally stretch to match the height and widths of the browser, minus the size of the divs to the left and bottom.
So the problem is 2 fold really; first i need to get the max height and width minus the link and image bars, secondly i need to resize the image on a browser resize whilst maintaining proportions.
Any help would be much appreciated.
Cheers
CIP

You could try using jQuery ui scaling effect:
$(document).ready(function () {
resizeImage(); // initialize
$(window).resize(function () {
resizeImage(); // initialize again when the window changes
});
function resizeImage() {
var windowHeight = $(window).height() - $('#nav').height(),
windowWidth = $(window).width(),
percentage = 0;
if (windowHeight >= windowWidth) {
percentage = (windowWidth / $('#image').width() ) * 100;
}
else {
percentage = ( windowHeight / $('#image').height() ) * 100;
}
$('#image').effect('scale', { percent : percentage }, 1);
};
});
Tested and works great, however, a few tweaks maybe needed to get it just the way you like it.

You may just not setup the image element width and height attributes, and write next styles:
.hentry img { max-width: 100%; }
And it will shrink relative to the minimum side.
P.S. But not in position: absolute; block which not have any size. Set up the parent block to relative positioning.