Как преобразовать уменьшенное изображение на большее изображение css

Question

Есть ли способ изменить размер изображения, не искажая его?

У меня есть миниатюрный снимок размером 70 пикселей, и мне нужно изменить его размер до 200px X 165px, сохраняя соотношение сторон. В данный момент он растягивает его, когда я устанавливаю ширину: 200 пикселей и высоту: 165 пикселей.

Вот код:

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

Answer 1

Если это не SVG или любой тип векторного типа изображения, растягивая это приведет к потере качества, потому что такие типы, как JPG, BMP, PNG имеют тип с потерями.

Простое изменение размер, однако, может быть достигнут следующим образом путем поддержания соотношения сторон:

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

или

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

Пояснение:

Вы даете либо фиксированную ширину или фиксированную высота по умолчанию. Что для вас важнее. Сила остального параметра автоматически масштабируется, следовательно, автоматически. После этого вы переопределяете дополнительные атрибуты для масштабирования изображений, чтобы в случае их изменения размер получался меньше + max-width/max-height не поддерживается в IE6 или ниже, поэтому вы все равно можете захотеть возврат к фиксированному размеру.

Answer 2

Вы также можете установить ширину только на auto и высотой до 100%.

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

И, как сказано другими, пока изображение не будет не vector или не SVG это всегда приводит к потере качества.