There are some common problems with images, you want to use in teasers or other elements on your website. Usually you have to fight with your breakpoints, because your elements, teasers and others have to be responsive.
Here is a simple solution for those images.
You have to wrap your image in a container (e.g. a
figure), which will get a
relative positioning and the desired
The image itself get an
absolute positioning and will be centered within the container.
But the wrapped image won't get a fixed
height, but following styling:
max-width: 100%; max-height: 100%;
With those lines of
CSS the image will become at most wide or heigh like the container - but not both.
Live preview with toggling sources: