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

时间:2016-12-21 07:34:53

标签: html css responsive

我不确定如何说出我需要的内容,但基本上我有三个不同的图像,我希望保持相同的比例,但它们的大小不一样。我猜它看起来像这样: |------| |----------| |--| | 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 要理解您需要缩小浏览器窗口,直到侧面的三张图片移到顶部。

7 个答案:

答案 0 :(得分: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;
}

答案 1 :(得分:1)

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

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

答案 2 :(得分:1)

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

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

答案 3 :(得分:1)

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

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

答案 4 :(得分:0)

使用flex

.sidebar {
     display: flex;
}

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

请参阅description

答案 5 :(得分:0)

由于您使用@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;
}
}

答案 6 :(得分:0)

很难管理以下内容:

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

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

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