CSS: How to scale an image from the center instead of top-left

Question

So my problem is that I have an image and I set its CSS to have a

max-width: 100% 

which scales it at lower resolutions ( as will be seen

Answer 1

Just replace width: 400px; with transform: scale(2,2) on :hover.

img {
    width: 100%; max-width: 100%;
}
div {
    position: absolute; left: 20%; top: 20%;
    width: 250px;
    transition: all 2s ease-in-out;
}
div:hover {
    transform: scale(2,2)
}