爲什麼我的水平照片隨屏幕尺寸縮放，但我的垂直照片不是？

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，但它取決於你需要/希望作爲最終結果。