html - How do I convert a thumbnail to a larger image css -

is there anyway resize image without distorting it?

i have 70px thumbnail image , need resize 200px x 165px while maintaining aspect ratio. @ moment stretches when set width: 200px , height: 165px.

here 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 not svg or type of vector type image, stretching result in loss of quality, because such types jpg, bmp, png of lossy type.

simple resize, however, can achieved maintaining 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 default. whichever more important you. force remaining parameter scale automatically, hence, auto. after override additional attributes images scale that, in case need resize, smaller + max-width/max-height not supported in ie6 or lower, why still might want fallback fixed size.