На ios неправильно отображается картинка?

Question

[belousfyodor]

Написал галерею для сайта, адаптировал его, открываю на ipad(и на iphone тоже самое), картинки в галерее растягиваются до первоначального размера (по высоте).
Вот код:
html
<

<div id="gallery" style="width: 100%; background-color: #303030;padding-bottom:20px">
        <div align="center">
            <div class="line-yellow"></div>
            <h1 style="display: inline-block;margin: 0 20px; padding-top: 60px;padding-bottom: 20px;color:#ffc000;">
                Галерея</h1>
            <div class="line-yellow"></div>
        </div>
        <div style="display:flex;margin:10px 0;width:30vh" align="center">
            <img id="1_img" class="image" src="{{ url_for( 'static', filename='img/gallery/HL_1.JPG')}}"/>
            <img id="2_img" class="image" src="{{ url_for( 'static', filename='img/gallery/HL_2.JPG')}}"/>
            <img id="3_img" class="image" src="{{ url_for( 'static', filename='img/gallery/HL_3.jpg')}}"/>
        </div>
</div>

css

.image{
    width:30vw;
    height: auto;
    margin: 0 1vw;
    cursor:pointer;
}

Comments

[FeST1VaL]

Скриншот, код в песочницу

[belousfyodor]

вот

Answer 1

[Cheizer]

Попробуйте рисункам прописать align-self:center; или align-items:center

Comments

[belousfyodor]

СПАСИБО!
Работает)

[Cheizer]

belousfyodor, не забывайте про префиксы

-ms-flex-item-align:center;
    -ms-grid-row-align:center;
    align-self:center; 


-webkit-box-align:center; 
    -ms-flex-align:center; 
        align-items:center