How to "resize" a rectangle image into a square image without losing any of the image?
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?
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.
background-size : cover; will crop the image...
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; "/>
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.
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;" />
