CSS to display image preview better

Question

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.

enter image description here

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

enter image description here

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

enter image description here

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

enter image description here

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, Feb 28 '13 at 15:01
The images will be uploaded through a submission form for a board. I am using a drag and drop HTML5 uploader. — DᴀʀᴛʜVᴀᴅᴇʀ, Feb 28 '13 at 15:04
This is easiest if you can change the HTML and wrap it in a container `
`, or better yet, use it as a background image for that `
`. — Blazemonger, Feb 28 '13 at 15:08
Possible duplicate: http://stackoverflow.com/questions/493296/css-display-an-image-resized-and-cropped — graphicdivine, Feb 28 '13 at 15:08

Hurricane Hamilton · Accepted Answer · 2013-02-28T16:26:58.433

5

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

css like this:

#img-wrap{
    height:200px;
    width: 200px;
    background-image: url('https://i.stack.imgur.com/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.

edited Feb 28 '13 at 16:26

answered Feb 28 '13 at 15:09

Hurricane Hamilton

574
3
15

Augustin Riedinger · Answer 2 · 2013-02-28T16:09:46.007

3

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 comment if you have more browser constraints.

edited Feb 28 '13 at 16:09

answered Feb 28 '13 at 15:06

Augustin Riedinger

20,909
29
133
206

Have you actually tried this out? it leads to a stretched image. – Hurricane Hamilton Feb 28 '13 at 15:11
Because the image background-size should not be set to 300px 300px if it's not square. Either you can put percentage (eg: 80% 80%) or you can calculate height pixel dimensions to make sure height is 200px; – Augustin Riedinger Feb 28 '13 at 15:16
cool, I didn't know the background-size: cover property ! I'll edit it. – Augustin Riedinger Feb 28 '13 at 16:09

score 0 · Answer 3 · answered Feb 28 '13 at 15:02

0

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;
}

answered Feb 28 '13 at 15:02

ATOzTOA

34,814
22
96
117

This wouldn't center the image correct and in result cut off 100px to the right? – DᴀʀᴛʜVᴀᴅᴇʀ Feb 28 '13 at 15:05
look at the edit. This method would only change starting from `0,0` – DᴀʀᴛʜVᴀᴅᴇʀ Feb 28 '13 at 15:22
No, that is not what it does. Question: do you want to resize the image or crop the image? Crop is not the same as resize. The last image in your edit will be the output of crop. – ATOzTOA Feb 28 '13 at 16:00

otinanai · Answer 4 · 2013-02-28T15:47:51.690

0

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.net/jRCgP/

edited Feb 28 '13 at 15:47

answered Feb 28 '13 at 15:15

otinanai

3,987
3
25
43

CSS to display image preview better

4 Answers4