Question

我不确定如何说出我需要的内容，但基本上我有三个不同的图像，我希望保持相同的比例，但它们的大小不一样。我猜它看起来像这样： |------| |----------| |--| | Img1 | | Img2 | | 3| |------| |----------| |--|

并让他们按比例缩放。这是HTML和CSS：

    @media all and (max-width: 775px) {
    	.aboutbody, .sidebar {
    		display: block;
    	}
    
    	.sidebar {
    		width: 86%;
    		margin-left: 7%;
    		height: 300px;
    	}
    
    	.sidebarpics {
    		height: 200px;
    		width: auto;
    		display: inline-block;
    	}
    }

    <div class="sidebar">
        <img class="sidebarpics" img src="assets/family1.jpg">
        <img class="sidebarpics" src="assets/speaking1.jpg">
        <img class="sidebarpics" src="assets/family2.jpg">
    </div>

这是我正在实时更新的网站。 http://hanksmith.com/about.php 要理解您需要缩小浏览器窗口，直到侧面的三张图片移到顶部。

Answer 1

我建议给他们一个百分比宽度，给每个孩子自己的宽度，使他们占用可用的空间。

这样的事情：

.sidebarpics:nth-child(1)
{
    width: 18%;
    height: auto;
}

.sidebarpics:nth-child(2)
{
    width: 36%;
    height: auto;
}

.sidebarpics:nth-child(3)
{
    width: 40%;
    height: auto;
}

Answer 2

在您的情况下，纵横比是问题。

有很多解决方案，但我建议使用3个小版本，并在较小的屏幕上显示它们而不是它们。如果您喜欢这个想法，那么我可以给您写一些代码。

Answer 3

您可以限制每张图片的最大宽度：

@media (max-width: 775px) {
  .sidebarpics {
     max-width: 32%;
     display: inline-block;
  }
}

Answer 4

尝试垂直对齐顶部。忽略高度玩，宽度为百分比。

 @media (max-width: 775px){
.sidebarpics {
    max-width: 32%;
    width: auto;
    display: inline-block;
    vertical-align: top;
    max-height: 100px;
}
}

Answer 5

使用flex

.sidebar {
     display: flex;
}

并为每张图片指定一个百分比宽度。

请参阅description

Answer 6

由于您使用@media查询来共享您的图片。您可以在%

中分享他们的宽度

尝试这样做

@media all and (max-width: 775px) {
.aboutbody, .sidebar {
    display: block;
}

.sidebar {
    width: 86%;
    margin-left: 7%;
    height: 300px;
}

.sidebarpics:first-child  {
    height: 200px;
    width: 30%; /*share the two imgs to any % you like*/
    float: left;
    display: inline-block;
}
.sidebarpics:nth-child(2) {
    height: 200px;
    width: 70%;
    float: left;
    display: inline-block;
}
.sidebarpics:last-child {
    height: 200px;
    width: 100%;
    display: inline-block;
}
}

@media all and (max-width: 600px) {
.sidebarpics:first-child  {
    height: 200px;
    width: 100%;
    float: none;
}
.sidebarpics:nth-child(2) {
    height: 200px;
    width: 100%;
    float: none;
    display: inline-block;
}
.sidebarpics:last-child {
    height: 200px;
    width: 100%;
    display: inline-block;
}
}

Answer 7

很难管理以下内容：

单独保持图像比例
所有相同的高度
没有剪切任何图像

如果最后一点是你可以逃避的事情，我建议如下。在父容器上使用定义的高度，并溢出：隐藏;切断高度以上的一切。图像与顶部对齐并具有最大宽度，以确保它们彼此相邻。如果您不介意升级，请改用宽度。

.sidebar {
    height: 300px;
   overflow: hidden;
}
.sidebar img {
    display: inline-block;
    vertical-align: top;
    max-width: 33%;
}

具有相同高度的不同宽度的响应式图像

7 个答案: