Make the image layout more organized using bootstrap and CSS - html

Question

So I have basically used manual percentages to make these images lie next together. As you see they are not very neatly layout or organized. How can I make it look more dashing?
Here's the code:
<div class="jumbotron jumbotron-fluid" style=" margin-top: 90px; ">
<div class="container">
<div class="row">
<div class="col-lg-2">
<img src="./assets/img/glass.jpg" class="img-responsive " style="width:95%"/>
<img src="./assets/img/rift.jpg" class="img-responsive m-y-1" style="width:95%;"/>
</div>
<div class="col-lg-8">
<img src="./assets/img/mhacks.jpg" class="img-responsive" style="width:100%; "/>
</div>
<div class="col-lg-2">
<img src="./assets/img/mindwave.png" class="img-responsive" style="width:120%;"/>
<img src="./assets/img/VR.png" class="img-responsive m-y-1" style="width:120%;"/>
</div>
</div>
</div>
</div>
Here's how it looks like:
http://imgur.com/e2I3yLu
Also here's the link to the website:
monajalal.github.io
Any suggestion is really appreciated. I wonder if there's a more straightforward method to image layout or any automatic method?

Answer 1

Set each image as a background image in a div:
<div class="jumbotron jumbotron-fluid" style=" margin-top: 90px; ">
<div class="container">
<div class="row">
<div class="col-lg-2">
<div style="background: url('./assets/img/glass.jpg'); background-size: cover;" class="img-responsive"></div>
<div style="background: url('./assets/img/rift.jpg'); background-size: cover;" class="img-responsive"></div>
</div>
<div class="col-lg-8">
<div style="background: url('./assets/img/mhacks.jpg'); background-size: cover;" class="img-responsive-large"></div>
</div>
<div class="col-lg-2">
<div style="background: url('./assets/img/mindwave.png'); background-size: cover;" class="img-responsive"></div>
<div style="background: url('./assets/img/VR.png'); background-size: cover;" class="img-responsive"></div>
</div>
</div>
</div>
</div>
Then set this css:
.img-responsive {padding-top: 60%; margin-bottom: 10px;}
.img-responsive-large {height: 208px; margin-bottom: 10px;}
#media screen and (max-width: 940px) {
.img-responsive-large {height: auto; padding-top: 60%;}
}

Answer 2

Try this... What I did was work with the grid. Use the padding from columns and even it with margins between the images, also set the images to 100% width. Class img-responsive sets a max-width of 100%, at least this way the image will fill the column.
<div class="jumbotron jumbotron-fluid">
<div class="container">
<div class="row">
<div class="col-lg-8">
<img src="http://www.online-image-editor.com//styles/2014/images/example_image.png" class="img-responsive"/>
</div>
<div class="col-lg-2">
<img src="http://www.online-image-editor.com//styles/2014/images/example_image.png" class="img-responsive "/>
<img src="http://www.online-image-editor.com//styles/2014/images/example_image.png" class="img-responsive m-y-1"/>
</div>
<div class="col-lg-2">
<img src="http://www.online-image-editor.com//styles/2014/images/example_image.png" class="img-responsive"/>
<img src="http://www.online-image-editor.com//styles/2014/images/example_image.png" class="img-responsive m-y-1"/>
</div>
</div>
</div>
</div>
Remove the inline styling - and instead target the images in the css and add this.
.jumbotron img { width: 100%; margin: 15px 0; }