图像在iPhone 8（Chrome和Safari）上垂直挤压

Question

我正在学习html和CSS，并决定重做html / css中的wordpress网站（该网站为saigonpads.com）。

我已经接近终点线了，但是http://www.saigonpads.com/test/saigonpads.html（我的网站的html / css / javascript版本）的“我们的Expat Pads照片”部分中的图像没有调整其宽高比。他们被垂直挤压。该网站可以在我的台式机，平板电脑和手机（三星）上使用chrome和IE正常工作。

以下是问题的屏幕截图：https://prnt.sc/obw5tp

这就是我的外观：https://prnt.sc/obw6gw

以下是与该问题有关的css和html。

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

        #photo-group {
            padding-top: 20px;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
        }
        .room-photos {
            border: 0px solid;
            border-radius: 4px;
            padding: 10px;
            max-width: 100%;
            height: auto;
            display: flex;
        }
        .section {
            margin: 0 auto;
            width: 90%;
            text-align: center;
            padding-top: 20px;
            padding-bottom: 40px;
        }

        <div class="section" id="room-photos">
            <h3>PHOTOS OF OUR EXPAT PADS</h3>
            <hr>
            <div id="photo-group">
                <img class="room-photos" src="room-photo-1.jpg">
                <img class="room-photos" src="room-photo-2.jpg">
                <img class="room-photos" src="room-photo-3.jpg">
                <img class="room-photos" src="room-photo-4.jpg">
                <img class="room-photos" src="room-photo-5.jpg">
                <img class="room-photos" src="room-photo-6.jpg">
                <img class="room-photos" src="room-photo-7.jpg">
                <img class="room-photos" src="room-photo-8.jpg">
            </div>
        </div>