How do I convert a thumbnail to a larger image css

Question

Is there anyway to resize an image without distorting it?

I have a 70px thumbnail image and I need to resize it to 200px X 165px while maintaining the aspect ratio. At the moment it stretches it when I set the width: 200px and height: 165px.

Here is the code:

CSS

.listing-img-div {
    width: 200px;
    height: 165px;
}

.listing-img {
    border: 1px solid black;
    margin-top: 5px;
    border: 1px solid #ddd;
    width: 100%;
    height: 100%;
}

HTML/PHP

echo '<div class="listing-img-div">';
  echo '<img class="listing-img" src="'.$img.'" alt="'.$title.'">';                                                     echo '</div>';

If your container is `200px wide`, you can use `img { max-width:100%; height:auto; }` This will stretch the image to the width of the containing div while keeping the aspect ratio - if you're increasing the size you will notice some blurriness obviously. It would help if you could post your HTML and CSS though. — Nick R, Jul 18 '13 at 13:04

score 6 · Answer 1 · edited Jul 18 '13 at 13:50

6

If it is not an SVG or any type of a Vector Type image, stretching it will result in the loss of quality, because such types as JPG, BMP, PNG are of lossy type.

Simple resize, however, can be achieved like so by maintaining the aspect ratio:

img {
   height: 165px;
   width: auto;
   max-width: 200px;
   max-height: 165px;
}

or

img {
   height: auto;
   width: 200px;
   max-width: 200px;
   max-height: 165px;
}

Explanation:

You give either fixed width or fixed height by default. Whichever is more important to you. The force the remaining parameter to scale automatically, hence, auto. After that you override with additional attributes for the images to scale so that, in case they need to resize, they will get smaller + max-width/max-height is not supported in IE6 or lower, which is why you still might want a fallback to a fixed size.

edited Jul 18 '13 at 13:50

Mohammad Areeb Siddiqui

9,795
14
71
113

answered Jul 18 '13 at 13:04

achudars

1,486
15
25

please explain him aswell what's happening there! :) Then == +1 :) – Mohammad Areeb Siddiqui Jul 18 '13 at 13:34
you give either fixed width or fixed height by default. Whichever is more important to you. Then force the remaining parameter to scale automatically, hence, auto. After that you override with additional attributes for the images to scale so that, in case they need to resize, they will get smaller + max-width/max-height is not supported in IE6 or lower, which is why you still might want a fallback to a fixed size. – achudars Jul 18 '13 at 13:49
you had to give it to him, not to me! Edited! :) – Mohammad Areeb Siddiqui Jul 18 '13 at 13:50

score 1 · Answer 2 · edited Jul 21 '13 at 18:41

1

You can also just set width to auto and height to 100%.

img {
   width: auto;
   max-height: 100%;
}

And as said by others until an image is not a vector or is not an SVG it will always result in loss of quality.

edited Jul 21 '13 at 18:41

Stano

8,749
6
30
44

answered Jul 18 '13 at 13:36

Mohammad Areeb Siddiqui

9,795
14
71
113

Is there anyway to make the image a vector or SVG with css, JavaScript? I am pulling the image through an API and it only returns a 70px thumbnail. – dgolman Jul 18 '13 at 13:43
@dgolman I am afraid, you can't make a vector image but you can make a SVG. – Mohammad Areeb Siddiqui Jul 18 '13 at 13:46
@dgolman see this link: http://stackoverflow.com/questions/12991351/css-force-image-resize-and-keep-aspect-ratio hope it helps :) – Mohammad Areeb Siddiqui Jul 18 '13 at 13:47
So basically there is no way to increase the size of the thumbnail without losing quality? – dgolman Jul 18 '13 at 14:03
2

@dgolman if somebody takes away your pie and eats it. Do you still have your pie? No... same with pixels and quality! =) – achudars Jul 18 '13 at 14:27

How do I convert a thumbnail to a larger image css

2 Answers2