Is there a way to maintain the original size and aspect ratio of an image in 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);
}
Instead of enlarging the scale by a given factor (here 2), how can I enlarge the photo to its original size and aspect ratio?
Instead of hovered size of 640x640, I want to show the original size of 550x368 upon hovering.