在大图像旁边的两个小对齐图像

我在编码时会如何创建两个垂直图像并且是否可以在不减小宽度的情况下减小较大图像的高度？因为我需要把它放在col-md-8上对此有什么想法？在大图像旁边的两个小对齐图像

这是我需要的图像。 Click here

HTML代码

<div class="row col-md-8"> 
<img class="row img-big img-responsive" src="/assets/icons/people-crowd-child-kid-large.jpg"></div> 
</div

CSS代码

.img-big{ height: 100%;width: 100%; }

上面的代码就是我用来做图像2旁边的大图像和3 的大尺寸图片是900x767

来源

2016-03-08 Brian

您应该格式化您的代码，如下所示：

<div class="row"> 
    <div class="col-md-8"> 
     <img class="img-big img-responsive" src="/assets/icons/people-crowd-child-kid-large.jpg"></div> 
    </div> 
    <div class="col-md-4"> 
     <img src="OTHER IMAGE"></div> 
     <img src="OTHER IMAGE"></div> 
    </div> 
</div>

如果您在col-md-4的底部看到底部的两张图像，如果您将宽度分配为100%，则下一张图像将下降。

你真的不应该在类名中同时有一个row和一个col-md。（请参阅http://getbootstrap.com/css/）

关于降低高度而不是宽度，您无法在Paint或Photoshop上裁剪图像并以正确的高度上传图像？

来源

2016-03-08 14:33:09

谢谢，我会尝试对图像我认为它不会好看，如果我将手动仅降低高度的代码。 – Brian

@Brain如果你想保持图像高分辨率，并想降低高度，你还必须减小宽度。如果您只想剪出高度，宽度可以保持不变。 –

感谢您的回复先生。我会尽力 – Brian

您可以使用flexbox属性来实现您想要的效果并将图像设置为背景。

body, html { 
 
    margin: 0; 
 
    padding: 0; 
 
    color: white; 
 
} 
 

 
.container { 
 
    height: 767px; 
 
    display: flex; 
 
} 
 

 
.left { 
 
    background-image: url('http://i.imgur.com/AzeiaRY.jpg'); 
 
    background-size: cover; 
 
    flex: 1; 
 
} 
 

 
.right { 
 
    display: flex; 
 
    flex-direction: column; 
 
    flex: 0 0 50%; 
 
} 
 

 
.one { 
 
    background-image: url('http://i.imgur.com/AzeiaRY.jpg'); 
 
    background-size: cover; 
 
    flex: 50%; 
 
} 
 

 
.two { 
 
    background-image: url('http://i.imgur.com/AzeiaRY.jpg'); 
 
    background-size: cover; 
 
    flex: 50%; 
 

 
}

<div class="container"> 
 
    <div class="left">Left image</div> 
 
    <div class="right"> 
 
    <div class="one">First image</div> 
 
    <div class="two">Second image</div> 
 
    </div> 
 
</div>

来源

2016-03-08 14:33:38 Roy

这个作品非常感谢！：D – Brian

不客气。 – Roy

我可以有跟进问题吗？因为图像2和3不像大图像那么紧。 http://i64.tinypic.com/2u92uu0.png我该如何解决这个问题？ – Brian

在大图像旁边的两个小对齐图像

回答

相关问题