I have a problem with a website: https://redaktionsbuero-geiger.de/

There are 4 x pictures under the item "Serviceangebote". These are square in raw format and represent circles with icons. I have no problems with this on Windows (Chrome, Firefox, Edge) and Android. The images are always scaled correctly and the circles are displayed round.

But under Safari (desktop Mac and iPhone) it doesn't work. The images are scaled incorrectly and displayed as an extreme oval and not as a circle as desired.

What could be the reason for this?

CodePudding user response：

Seems like your image is stretching because of the flexbox. I think align-self: center; should fix that issue, but for some reason I see that it doesn't help on your website.

Anyway, you can use object-fit: contain to make sure that the image maintains it's aspect ratio:

.card-img {
  object-fit: contain;
}

Or another option is to wrap the <img> element with another div:

<div >
  <div> <!-- an additional div -->
    <img />
  </div>
</div>