如何通过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;
}