2017-06-21 50 views
1

我做照相館正確地將製作3張圖片的一面,我想知道如何更好地變形圖像,從而使並排3圖像側,每個圖像包裝成 <div class="col-md-4">,或者我可以把所有的圖像轉換成如何通過側

<div class="col-md-4"> 
    <img src=""> 
    <img src=""> 
    <img src=""> 
    <img src=""> 
</div> 

什麼是正確的方法?

+0

是圖像的大小總是相同的? –

+0

你爲什麼不試試? –

+0

是的,我嘗試了沒有區別,但我想知道什麼是正確的方法 – Viktor

回答

1

試試這個

<div class="col-md-4"> 
    <img src=""/> 
</div> 
    <div class="col-md-4"> 
    <img src=""/> 
</div> 
<div class="col-md-4"> 
    <img src=""/> 
</div> 
+0

我的問題是我應該將一個圖像包裝到col-md-4中,還是我可以包裝所有圖像? – Viktor

+0

你可以使用我提供的代碼,它將並排。 您也可以將圖像放入一個「col-md-4」,但將圖像的寬度設置爲33.33%,以便它們具有相同的寬度(如果您願意)。 – BrS

0

的所有圖像col-md-4

.x { 
 
    width: 25%; 
 
    box-sizing: border-box; 
 
    float: left; 
 
} 
 

 
img { 
 
    width: 100%; 
 
    height: 100px; 
 
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<div class="col-md-4"> 
 
    <div class="x"><img src="http://justcuteanimals.com/wp-content/uploads/2016/07/cute-funny-pug-life-shades-summer-dogs-puppy-animal-pictures.jpg"></div> 
 
    <div class="x"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQhsZRYQl-mSO-SY_VMRbWoeEycn9HbxKwqnI7IxOVb0eKJLpom"></div> 
 
    <div class="x"><img src="http://justcuteanimals.com/wp-content/uploads/2016/10/baby-bear-pictures-cute-animal-pics.jpg"></div> 
 
    <div class="x"><img src="http://www.mrwallpaper.com/wallpapers/cute-bunny-1600x900.jpg"></div> 
 
</div>