在大圖像旁邊的兩個小對齊圖像

我在編碼時會如何創建兩個垂直圖像並且是否可以在不減小寬度的情況下減小較大圖像的高度？因爲我需要把它放在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

在大圖像旁邊的兩個小對齊圖像

回答

相關問題