Develop Reference

CSS/Javascript image size to fit while cropping and preserving aspect ratio

I have a block that is of size 180x270 that I need to show images
The image sizes can vary, and I want to make sure it expands or shrink so that the smaller border (either height or width) matches the block, whereas the larger border gets cropped while preserving aspect ratio.
Examples are the following:
- An image of 360x600 gets resized to 180x300, and I crop the height from 300 to 270
- An image of 100x135 gets resized to 200x270, and I crop the width from 200 to 180
Basically I want to make sure there's no white space as I expand/shrink the image while preserving aspect ratio by cropping the section exceeding the block
Any suggestions on css or javascripts that can handle this?

It seems like you're looking for background-size:cover, which works when the image is a background-image
background:url(imgurl.jpg) /* Other background image properties */;
background-size:cover;
Demo

Zach's solution is best if you can use a bg-image for the task, but if you need to use an <img> tag (there are cases when this is advised), then you need javascript to calculate the image's aspect-ratio and determine whether it is more squat or more vertically stretched than the target frame. Then there's a little CSS as well:
JavaScript
//obtain a dom-reference for the image using getElementById
//or by some other means depending on what you know of its HTML
var img = document.getElementById('some-image-id')
var aspectRatio = img.clientWidth/img.clientHeight;
//if the img is more squat, set it's height equal to the target frame's height
if(aspectRatio > (270/180)){
img.style.height = 180 //image is
}
//otherwise the image is more vertically stretched
// so set the img width equal to the target frame's width
else{
img.style.width = 270;
}
This will set the
CSS
Finally, to center an over-sized image inside a wrapper vertically and horizontally, regardless of how the fit was made:
.wrapper{
position:relative;
display:inline-block;
}
.wrapper img{
position:absolute;
top:-9999px;
right:-9999px;
bottom:-9999px;
left:-9999px;
}

How to force image to have even height

Let me explain this question. I'm working on a responsive website that need the image to be scaled depending on the window's width. Do I have all set those image with this style
.bgImg{width:100%; height:auto; display:block; position:relative;}
and I have make a 3 column group like this
the thing is when the height of the window becomes odd, both 25% column have now a margin of 1px at the bottom
You'll need to zoom in the image above since it's only 1px.
I was wondering if there's a way to fix this or any javascript that could force the image height to round up to the nearest even number so all my image's height will be even and will fix that problem.
Added a fiddle http://jsfiddle.net/2QneE/3/

What is the best way to handle variable height images when overflow-x is set to hidden

I've got a very high resolution image which is meant to be displayed on any size monitor. The height is to always show in its entirety and the width will be scrollable via JavaScript. The containing element will have an overflow-x set to hidden. My question is how to best handle a variable height and still maintain the correct proportions.
Thanks for any help.

If you only set one of the dimensions (height or width, max and min also apply), the other will be scaled proportionally and maintain the aspect ratio.

You can try using the max-height property. The value can be in pixels or percent.
max-height: 100%
Or
max-height: 200px; /* whatever height */
This will constrain the image proportionally.

How to get the background-size:cover; size and percent?

I would like to write a jQuery plugin to animate a background-size property from cover to 100% and vice versa but I don't know how to get the cover to percent values, is it possible to get the resized width and height of a sized background image?
I know I can get $('#selector').css('backgroundSize') but I get cover and I would like to convert it in the current width and height of the background image, how can I do that?

If you can get the dimensions of the image then you can check them against the dimensions of the container in which the image is the background-image. You can use these two pieces of information to turn cover into a percentage.
To get the dimensions of the image, create an img element to test:
$('<img />').bind('load', function () {
//the image has loaded, you can now get it's height/width
}).addClass('offScreen').attr('src', '...');
The offScreen class is used to move the element off the screen while it loads so the user can't see it happening:
.offScreen {
position : absolute;
left : -9999px;
}

background image change with screen size

My website's background is a huge image that covers the whole webpage, how can I make it so that, we detect user's screen size and change the background image accordingly?
Say for example, my background image is 1x1px, if user screen is 2x2px (this is just an example, nobody has this kind of small screen), I want stretch my background to fit 2x2. If user screen is say, 0.5x0.6px, then I want my background to be shown only its 0.5x0.6px part, not the whole 1x1px.

Use an image tag as the background give it a 100% for width and height, and set it behind all of the content with z-index give it absolute positioning and set its top and left where you need it to be.
<img src="yourimage" width="100%" height="100%" style="z-index:0"/>
Live Demo

In CSS3, we have a new property called background-size:
body {
background-size: 100%;
}

looking for this?
<div style="width:100%; z-index:0; height:100%; background: url(1pximage.gif)"></div>

You can detect the users screen size and do it, also you can attach a event handler to do the same when the window size is modified.
$(function(){
$(window).resize(function(){
var windowW = $(window).width();
var windowH = $(window).height();
//Using above variables you can deside the size of the background image to be set
}).resize();//Trigger the resize event on page load.
});