html - 为什么我的水平照片随屏幕尺寸缩放，而我的垂直照片却没有？

Question

我在一个网站上工作，该网站的垂直和水平照片都在 overflow:scroll 上。在桌面屏幕上，照片看起来很棒并且排列整齐，但是，当屏幕尺寸减小(平板电脑或手机)时，我的风景照片缩放得很好，我的肖像照片保持相同大小!为什么？!

编辑:所有照片都是300ppi

     @media only screen and (max-device-width: 540px) {
     h1 {width: 100%;}
     }

     @media screen and (max-height: 450px) {
     .sidenav {padding-top: 15px;}
     .sidenav a {font-size: 18px;}
     }



    .parent-container {
            width: 95%;

            height: auto;
			      padding: auto;
            overflow: scroll;
            overflow-y: hidden;
            margin-top: 5px;
            white-space: nowrap;
            display: inline-block;

    }

    .container {
    position: relative;
    display: inline-block;
    padding-right: 15px;
    padding-left: 15px;

    }

    .image {
    opacity: 1;
    display: inline-block;
    width: 100%;
    height: auto;
    transition: .5s ease;
    backface-visibility: hidden;
    padding-right: 15px;
    object-fit: cover;

    }


    .parent-container .container .image {
    width: auto\9; /* IE8 */
    }

    <div class="parent-container">
    <div class="container">
    <img src="http://via.placeholder.com/750x500" alt="" class="image" 
    style="width:100%">
    </div>

    <div class="container">
    <img src="http://via.placeholder.com/323x485" alt="" class="image" 
    style="width:100%">
    </div>

    <div class="container">
    <img src="http://via.placeholder.com/323x485" alt="" class="image" 
    style="width:100%">
    </div>
 

     <div class="container">
     <img src="http://via.placeholder.com/323x485" alt="" class="image" 
     style="width:100%">
     </div>

     <div class="container">
     <img src="http://via.placeholder.com/750x500" alt="" class="image" 
     style="width:100%">
     </div>

     <div class="container">
     <img src="http://via.placeholder.com/323x485" alt="" class="image" 
     style="width:100%">
     </div>

     <div class="container">
     <img src="http://via.placeholder.com/750x500" alt="" class="image" 
     style="width:100%">
     </div>

     <div class="container">
     <img src="http://via.placeholder.com/750x500" alt="" class="image" 
     style="width:100%">
     </div>


     <div class="container">
     <img src="http://via.placeholder.com/323x485" alt="" class="image" 
     style="width:100%">
     </div>

     <div class="container">
     <img src="http://via.placeholder.com/323x485" alt="" class="image" 
     style="width:100%">
     </div>

     <div class="container">
    <img src="http://via.placeholder.com/750x500" alt="" class="image" 
    style="width:100%">
    </div>


    <div class="container">
    <img src="http://via.placeholder.com/323x485" alt="" class="image" 
    style="width:100%">
    </div>

    <div class="container">
    <img src="http://via.placeholder.com/323x485" alt="" class="image" 
    style="width:100%">
    </div>


    </div>

Answer 1

如果您使用的是 Bootstrap ，请将“img-responsive”类添加到 img 标签。