为什么我的水平照片会随着屏幕尺寸而缩放，而我的垂直照片却不会?

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;
			      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: auto9; /* 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-response"类添加到img标签中。

Answer 2

拜托，你可以做的第一件事是不要在HTML上使用(永远)内联样式(标签上的样式)。您必须将宽度：100%高度：自动应用于您的图像，看看这个例子，希望对您有所帮助，我的朋友：https://codepen.io/jorgemonte/pen/VpqmNN

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

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