Why does the picture not keep the aspect ratio in the safari browser?

  • 0
    Hello. I am implementing layout and faced such a problem. For pictures that have a transform property, when the screen shrinks, I reduce the width so that the picture becomes proportionally smaller. However, in the safari browser, the height of the image remains the same, which causes it to stretch.

    Stretching was solved easily using the object-fit property. However, since the altitude has remained the same, the layout still floats. Someone knows how to solve this problem. If anything, here's the layout https://pateder.ru/Development/sineo/
    JavaScript Anonymous, Apr 28, 2020

  • 1 Answers
  • 0
    Good afternoon,

    How do you define transform? )

    Some properties do indeed work differently in different browsers. If you have a problem with "transform safari", just write in Google and the first links give something like this:

    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);

    Also look for special sites that check / add cross-browser compatibility for css

Your Answer
To place the code, please use CodePen or similar tool. Thanks you!