Отзывчивый квадрат img (отступ-нижний: 100%) не работает на iOS? - PullRequest
Новая
       52

Отзывчивый квадрат img (отступ-нижний: 100%) не работает на iOS?

0 голосов
/ 04 мая 2020

В моем блоге есть сетка "Связанных постов", и я попробовал трюк padding-bottom: 100%, чтобы сделать изображение каждого поста отзывчивым.

Он работает на рабочем столе, но на мобильном телефоне iOS высота изображений тянется до 100% области просмотра. На самсунге телефон работает нормально.

Куда я иду не так? Я проверил свойство object-fit на Caniuse , и оно в значительной степени поддерживается. Пробовал в Safari, Chrome, Edge и Firefox: такое же странное поведение.

Заранее благодарим за вашу ценную помощь!

Вот разметка: 

<!-- GRID CONTAINER -->
<div class="related-posts"> 

    <!-- IMAGE OF EACH GRID ITEM -->
    <a class="img-wrapper">
         <img src="/path/to/img">
    </a>

    ... <!-- OTHER GRID ITEMS -->

</div>

И САСС: 

.related-posts
   display: grid
   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))
   grid-gap: 1.5rem

.img-wrapper
   display: grid
   place-items: center
   &::before
     content: ""
     padding-top: 100%
     display: block
     grid-area: 1 / 1 / 2 / 2
   img
     width: 100%
     height: 100%
     object-fit: cover
     grid-area: 1 / 1 / 2 / 2

1 Ответ

0 голосов
/ 05 мая 2020

Я изменил CSS и теперь это работает. Вот код: 

.img-wrapper
   position: relative
   display: block
   &::before
     content: ""
     padding-top: 100%
     display: block
   img
     position: absolute
     width: 100%
     height: 100%
     object-fit: cover
     top: 0
     left: 0
     bottom: 0
     margin: auto

Кажется, проблема заключалась в установке каждого элемента сетки на display: grid

...