为什么我的水平照片会缩放屏幕尺寸，但我的垂直照片不是？

Question

我正在制作一个包含溢出的垂直和水平照片的网站：滚动。在桌面屏幕上，照片看起来很棒并且排成一行，但是，当屏幕尺寸减小（平板电脑或移动设备）时，我的风景照片会很大，我的人像照片保持相同的大小！为什么呢？！

编辑：所有照片均为300ppi

＆＃13;

＆＃13;

     @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 */
    }

＆＃13;

    <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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

如果您使用的是bootstrap，请添加＆＃39; img-responsive＆＃39; class to img tag。

Answer 2

请注意，您可能要做的第一件事就是不要在HTML上使用（从不）内联样式（标签上的样式）。你必须对你的图片应用宽度：100％高度：自动，看看这个例子，我希望它会帮助你我的朋友：https://codepen.io/jorgemonte/pen/VpqmNN

.img-div{
 width: 100%;
}

.img-div img{
  width: 100%;
  height: auto;
 }

你可以尝试不使用宽度：100％作为图像父div，但它取决于你需要/想要的最终结果。