Адаптивное изображение и видео с подгонкой объекта: содержат - PullRequest
Новая
       15

Адаптивное изображение и видео с подгонкой объекта: содержат

0 голосов
/ 22 февраля 2020

Я пытаюсь привести изображение / видео в соответствие с отзывчивым div.

div - это гибкий контейнер, и его ширина всегда составляет 100%. Я хочу, чтобы изображение и видео внутри ВСЕГДА соответствовали ширине div, сохраняя соотношение.

вот что я пробовал 

<div class="flex_container width_100ps">
    <img 
    class="the-img" 
    src="../image/123.jpg">
</div>


<div class="flex_container width_100ps">
    <video class="the-img" autoplay loop muted playsinline>

        <source src="../image/456.mp4" type="video/mp4">

    </video>
</div>

.flex_container {
    display: flex;

    flex-wrap: wrap;
    flex-direction: row;

    justify-content: flex-start;
    align-content: flex-start;

    height: auto;
}

.width_100ps {
    width: 100%;
}

.the-img {
    object-fit: contain;
    width: 100%;
height: auto;
}

Это прекрасно работает в (Chrome ) на P C, Macbook, но не на (chrome) iPhone / iPad и (сафари) на все

, если изображение в книжной / вертикальной , оно появляется чтобы быть похожим на картинку, которую я прикрепил:

https://i.stack.imgur.com/PWL19.jpg

...