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 width and height. The image itself get an absolute positioning and will be centered within the container.

But the wrapped image won't get a fixed width and 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:

233 0 0