javascript - CSS to display image preview better - Stack Overflow

I was trying to figure out what is the best, if it can be done, and desired method to take an image that is uploaded and trim the image for a thumb in CSS. If it cannot be done in pure CSS what is the method to do it in JavaScript/jQuery? The images may be different sizes but I am looking for a way that an image will square on center, and then reduce to fit. Example below:

This image is 413 x 300.

If this image was trimmed from the left and right for the portfolio thumb it would be 300 X 300:

Then the image needs to be reduced for the thumb 200 x 200 or what ever value the thumb is set to display:

EDIT my understanding if #img_preview{width:200px;} is applied it would result in this:

I was trying to figure out what is the best, if it can be done, and desired method to take an image that is uploaded and trim the image for a thumb in CSS. If it cannot be done in pure CSS what is the method to do it in JavaScript/jQuery? The images may be different sizes but I am looking for a way that an image will square on center, and then reduce to fit. Example below:

This image is 413 x 300.

If this image was trimmed from the left and right for the portfolio thumb it would be 300 X 300:

Then the image needs to be reduced for the thumb 200 x 200 or what ever value the thumb is set to display:

EDIT my understanding if #img_preview{width:200px;} is applied it would result in this:

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Feb 28, 2013 at 15:10 GʀᴜᴍᴘʏCᴀᴛ asked Feb 28, 2013 at 14:59 GʀᴜᴍᴘʏCᴀᴛGʀᴜᴍᴘʏCᴀᴛ 9,0482020 gold badges9090 silver badges160160 bronze badges 5

• AFAIK it's something that should be done server-side. Even a raw image processing is terribly slow in JavaScript (by the way...how can you access the image data?) – Adriano Repetti Commented Feb 28, 2013 at 15:01
• The images will be uploaded through a submission form for a board. I am using a drag and drop HTML5 uploader. – GʀᴜᴍᴘʏCᴀᴛ Commented Feb 28, 2013 at 15:04
• This is easiest if you can change the HTML and wrap it in a container <div>, or better yet, use it as a background image for that <div>. – Blazemonger Commented Feb 28, 2013 at 15:08
• Possible duplicate: stackoverflow./questions/493296/… – graphicdivine Commented Feb 28, 2013 at 15:08
• @graphicdivine would that crop the image on center though? – GʀᴜᴍᴘʏCᴀᴛ Commented Feb 28, 2013 at 15:11

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 5

example here: http://jsfiddle/cnWqQ/5/

css like this:

#img-wrap{
    height:200px;
    width: 200px;
    background-image: url('https://i.sstatic/yQ1j8.jpg');
    background-size: cover;
    background-position:center; 
}

html like so:

<div id="img-wrap"></div>

Works by putting the images as the background in a div, works for all image shapes and sizes consistently.

it involves some css3.

You can do it in CSS, but it will only work with modern browsers :

You'll use background-image property :

<div id="myImageTrimed">
</div>

and the css :

#myImageTrimed {
    background-image: url('img/youImage.jpg');
    background-position: center; /* to make sure it trims the borders */
    background-size: cover; /* As large as possible */
    height: 200px; /* But only 200x200px are shown */
    width: 200px;
} 

Please ment if you have more browser constraints.

Just set the CSS width to the value you need, the height will be automatically adjusted to maintain the aspect ratio.

#img_preview{
    width:200px;
}

You can mask the image with a div:

Your div: height:200px; width:200px; overflow: hidden;

Your image: position:absolute; height:inherit; margin-left:-15%;

see this demo below: http://jsfiddle/jRCgP/