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

Question

我正在一个网站上有一个溢出的垂直和水平照片：滚动。在桌面屏幕上，照片看起来很棒并且排列整齐，但是，当屏幕尺寸减小（平板电脑或移动设备）时，我的风景图片缩放很大，我的照片照片保持相同的尺寸！为什么？！

编辑：所有照片都是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; 
 
\t \t \t  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

如果使用的是引导，那么请加入 'IMG-响应' 类img标签。

Answer 2

请您首先要做的是不要在您的HTML（标签样式）上使用（从不）内联样式。您必须应用宽度：100％高度：自动将您的图片，看看这个例子，我希望这将有助于你我的朋友：https://codepen.io/jorgemonte/pen/VpqmNN

.img-div{ 
width: 100%; 
} 

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

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