Как масштабировать изображение до исходного размера с помощью CSS?

Question

Я увеличиваю изображение с помощью CSS как

HTML

<img src="https://www.gstatic.com/webp/gallery/1.jpg" />

CSS

img {
    width: 320px;
    height: 320px;
    position: relative;
    transition: 0.2s ease;
}

img:hover {
    transform: scale(2);
}

JSFIDDLE

Вместо увеличения масштаба на определенный коэффициент (здесь 2), как я могу увеличить фотографию до ее исходного размера и соотношения сторон?

Вместо размера 640x640 я хочу показать исходный размер 550x368 при наведении.

Answer 1

Измените свой :hover класс на этот:

img:hover {
    height: auto;
    width: auto;
}

или

img:hover {
    height: 100%;
    width: auto;
}