How to "resize" a rectangle image into a square image without losing any of the image?

Question

This is for a eBay listing which won't allow script tags so I would like to avoid JS and us CSS only.

http://www.garralab.com/nailthumb-examples.php See - Examples > Resize.

Is this possible in CSS only?

Resize it, and then set **border-radius** with css, you will wont lose any quality and have round image. — Itsmeromka, Apr 17 '14 at 07:53

score 2 · Answer 1 · answered Apr 17 '14 at 08:03

2

There is a solution for this problem using background. If you have unknown size images can make squire thumbnail with background-size:cover.

<div class="thumbnail" style="background-image:url(print/the/image/path.jpg);"></div>

.thumbnail {
  background-repeat:no-repeat;
  background-position: center;
  background-size: cover;
}

background-size:cover; -- will make any image to cover the full area.

answered Apr 17 '14 at 08:03

Jeyarathnem Jeyachanthuru

1,151
10
21

`background-size : cover;` will crop the image... – web-tiki Apr 17 '14 at 08:07
That will never crop image but hide. http://cdpn.io/cgaKj – Jeyarathnem Jeyachanthuru Apr 17 '14 at 08:12
that is what is called "cropping" see here : http://en.wikipedia.org/wiki/Cropping_(image)#Graphic_examples_.28photography.29 – web-tiki Apr 17 '14 at 08:14
Thanks, I thought cropping means like cutting image with php. thanks again. – Jeyarathnem Jeyachanthuru Apr 17 '14 at 08:18
It is also cutting the image with php or other. Here is an example I fiddled : http://jsfiddle.net/webtiki/X9KJL/4/ – web-tiki Apr 17 '14 at 08:21
The same but with `background-size: contain;` works fine for me. – Eugene Gluhotorenko Aug 18 '14 at 09:23

score 0 · Answer 2 · answered Apr 17 '14 at 07:58

Nothing prevents you from using old school CSS:

<img
    src="http://cdn.sstatic.net/stackexchange/img/logos/so/so-logo.png" 
    style="width:400px; "/>

<hr />

<img 
    src="http://cdn.sstatic.net/stackexchange/img/logos/so/so-logo.png" 
    style="height:100px; width:100px; "/>

Explanation:

Set the width or the height only and the imags will be resized and keep its proportions.

Set both width and height and your image will be resized and proportions will be lost.

Demo

http://jsfiddle.net/FZ4nt/

score 0 · Answer 3 · answered Apr 17 '14 at 08:09

This is what object-fit does in css. Unfortunately, just a few browsers supports it.

Another solution whould be, if you use some server-side scripting (f.ex. php), get the dimensions of the image on server side, and apply padding (or transparent border) to fill the space after resizing the image.

F.ex:

Original image is 200x400, and you want to produce a 100x100 lookalike, you can do it with:

<img src=".../200x400.png"
     width="50"
     height="100"
     style="padding: 0px 25px;" />

How to "resize" a rectangle image into a square image without losing any of the image?

3 Answers3

Explanation:

Demo