html - 如何通过 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)放大？

我想在悬停时显示 550x368 的原始大小，而不是 640x640 的悬停大小。

Answer 1

将您的 :hover 类更改为:

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

或

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