为什么我的水平照片会随着屏幕尺寸缩放而我的垂直照片不是？答案

【问题标题】：Why are my horizontal photos scaling with screen size but my vertical photos are not?为什么我的水平照片会随着屏幕尺寸缩放而我的垂直照片不是？
【发布时间】：2017-06-17 02:39:05
【问题描述】：

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

编辑：所有照片均为 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>

【问题讨论】：

横向/纵向，你是指横向/纵向吗？
@MichaelCoker 是的，我愿意。
我们如何知道哪些是纵向的，哪些是横向的？他们的决议是什么？如果您使用来自placeholder.com 的图像重新创建布局，将会有所帮助
我已经更新了我的问题@MichaelCoker
谢谢。你到底希望发生什么？您是否希望所有图像都显示在屏幕上并在调整大小时按比例缩小？或者你想让他们中的一群人像现在这样离开屏幕吗？如果是这样，您希望横向图像在什么时候缩放并留在视口中？我真的不明白你在做什么以及最终目标是什么。

标签： html css mobile photo responsive

【解决方案1】：

如果您使用的是引导程序，请在 img 标签中添加“img-responsive”类。

【讨论】：

如果我目前没有使用bootstrap，是否容易上手？

【解决方案2】：

拜托，你可以做的第一件事是不要在你的 HTML 上使用（从不）内联样式（标签上的样式）。您必须将 width: 100% height: auto 应用于您的图像，看看这个例子，我希望它对你有帮助我的朋友：https://codepen.io/jorgemonte/pen/VpqmNN

.img-div{
 width: 100%;
}

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

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

【讨论】：

在您的情况下，css 必须是： .container{ width: 100%; （可选） } .container img{ 宽度：100%;高度：自动；如果看起来不太好，根据图像比例，尝试反转并将宽度：自动与高度：100%。让我知道它是否运作良好:)
嗨，我按照你的建议做了，除了宽度和高度都是自动的。我的肖像照片没有按我想要的那么小，但我决定垂直对齐：中间，这样就不会有尴尬的空白。谢谢你的帮助！！
不客气@KaylaC！我很高兴它工作得很好。你介意给我一票吗？只需单击“此答案很有用”即可。谢谢！