I recommend replacing the inline <img> with a <div> and use css to set a background-image: url('url-to-image') property on it, along with background-size: cover;.
background-size: cover will resize the image to fill the entire container (without changing its aspect-ratio, so it won't warp). This is a better option for the different image sizes issue.
Then instead of having the whole box scale on hover, we could keep the box the same size, but create a zoom effect on the image. This is better experience because when we resize elements on the page, it can cause unintended "jitter", where elements around them will move too, which distracts the user's attention.
https://css-tricks.com/zooming-background-images/
I recommend replacing the inline
<img>with a<div>and use css to set abackground-image: url('url-to-image')property on it, along withbackground-size: cover;.background-size: coverwill resize the image to fill the entire container (without changing its aspect-ratio, so it won't warp). This is a better option for the different image sizes issue.Then instead of having the whole box scale on hover, we could keep the box the same size, but create a zoom effect on the image. This is better experience because when we resize elements on the page, it can cause unintended "jitter", where elements around them will move too, which distracts the user's attention.
https://css-tricks.com/zooming-background-images/