Адаптивный макет: растянутые изображения в Safari - PullRequest
Новая
       62

Адаптивный макет: растянутые изображения в Safari

1 голос
/ 05 марта 2020

это мой макет.

Желаемое поведение заключается в том, что при изменении размера окна по вертикали изображение масштабируется с сохранением исходного соотношения сторон.

Мой код работает очень хорошо во всех браузерах кроме Safari (вы можете увидеть его, попробовав фрагмент в разных браузерах).

У вас есть решение? Спасибо;) 

.wrap-container{
  width: 100%;
  display: flex;
  justify-content: center;
  background-color: yellow;
  height: 55vh;
}

.wrap{
  width: 700px;
  background-color: aqua;
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  padding-top: 64px;
}

.wrap img{
    height: 100%;
    width: auto;
    max-width: 300px;
    max-height: 300px;
}
<div class="wrap-container">
  <div class="wrap">
    <img src="https://via.placeholder.com/300"/>
  </div>
</div>

1 Ответ

0 голосов
/ 05 марта 2020

Добавить flex: 0; на изображении 

.wrap-container{
  width: 100%;
  display: flex;
  justify-content: center;
  background-color: yellow;
  height: 55vh;
}

.wrap{
  width: 700px;
  background-color: aqua;
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  padding-top: 64px;
}

.wrap img{
    height: 100%;
    width: auto;
    flex: 0;
    max-width: 300px;
    max-height: 300px;
}
<div class="wrap-container">
  <div class="wrap">
    <img src="https://via.placeholder.com/300"/>
  </div>
</div>
...