Изображение не сохраняет соотношение сторон на мобильном устройстве (iPhone)

Question

Я видел решения для соотношения сторон с использованием:

img{
   width: auto;
   max-width: 100%;
   height: auto;
}

В моем случае CSS для рассматриваемого изображения:

.schedule-img{
  padding: 1em;
  margin-top: 2em;
  margin-left: 1em;
  margin-right: 1em;
  margin-bottom: 2em;
  border-style: solid;
  border-color: var(--sf-primary);
  border-width: .5em;
  border-radius: .5em;
  width: auto;
  max-width: 100%;
  height: auto;
}

In Firefox ' s отзывчивый дизайн для iPhone 8 плюс, он выглядит так, как я задумал:

But when I actually test it on my iPhone 8 plus, it looks like:

iphone

По ширине вроде нормально, но по высоте растянуто. Есть советы?

Answer 1

Лучшее решение для такого рода проблем для поддержки всех разрешений - сделать его как css фоном, чтобы вы сэкономили много пота. если изображение добавляется динамически, вы можете добавить его через атрибут style в качестве фона.

Затем вы можете поиграть с опциями фона, если вас не устраивает стиль.

// example
background-image: url(yourimagepath);
background-size: cover;
// define height and width of parent container
width: 50%; // example
height: 320px; // example