Problem in creating side-by-side images (Pure HTML/CSS) - html

I have problem in vertical space between Up and down portfolio row.
I have some unwanted space in rows
It's not margin or padding in box, i think this problem is for img tag
Can anyone help me?
.portfolio.row {
display: flex;
}
.col-4 {
flex: 33.33%;
}
.portfolio > div img {
width: 100%;
}
<div class="portfolio row">
<div class="col-4" id="coffe">
<img src="https://cdn.pixabay.com/photo/2019/05/07/16/19/strawberry-4186310_960_720.jpg" alt="Nature1">
</div>
<div class="col-4" id="coffe">
<img src="https://cdn.pixabay.com/photo/2019/05/07/16/19/strawberry-4186310_960_720.jpg" alt="Nature2">
</div>
<div class="col-4" id="coffe">
<img src="https://cdn.pixabay.com/photo/2019/05/07/16/19/strawberry-4186310_960_720.jpg" alt="Nature3">
</div>
</div>
<div class="portfolio row">
<div class="col-4" id="work">
<img src="https://cdn.pixabay.com/photo/2019/05/07/16/19/strawberry-4186310_960_720.jpg" alt="Nature1">
</div>
<div class="col-4" id="work">
<img src="https://cdn.pixabay.com/photo/2019/05/07/16/19/strawberry-4186310_960_720.jpg" alt="Nature2">
</div>
<div class="col-4" id="work">
<img src="https://cdn.pixabay.com/photo/2019/05/07/16/19/strawberry-4186310_960_720.jpg" alt="Nature3">
</div>
</div>


My guess is that it's trying to keep the aspect ratio of the images. If you add height: 100% it does work:
.portfolio.row {
display: flex;
}
.col-4 {
flex: 33.33%;
}
.portfolio > div img {
width: 100%;
height: 100%;
}
<div class="portfolio row">
<div class="col-4" id="coffe">
<img src="https://cdn.pixabay.com/photo/2019/05/07/16/19/strawberry-4186310_960_720.jpg" alt="Nature1">
</div>
<div class="col-4" id="coffe">
<img src="https://cdn.pixabay.com/photo/2019/05/07/16/19/strawberry-4186310_960_720.jpg" alt="Nature2">
</div>
<div class="col-4" id="coffe">
<img src="https://cdn.pixabay.com/photo/2019/05/07/16/19/strawberry-4186310_960_720.jpg" alt="Nature3">
</div>
</div>
<div class="portfolio row">
<div class="col-4" id="work">
<img src="https://cdn.pixabay.com/photo/2019/05/07/16/19/strawberry-4186310_960_720.jpg" alt="Nature1">
</div>
<div class="col-4" id="work">
<img src="https://cdn.pixabay.com/photo/2019/05/07/16/19/strawberry-4186310_960_720.jpg" alt="Nature2">
</div>
<div class="col-4" id="work">
<img src="https://cdn.pixabay.com/photo/2019/05/07/16/19/strawberry-4186310_960_720.jpg" alt="Nature3">
</div>
</div>


Just use the following code and it will be fixed! height: 100%; will solve your problem. here is example
.portfolio>div img {
width: 100%;
height: 100%; /* Add this extar value */
}

Related

CSS Flex Grid: matching image heights of different aspect ratios?

I have an example of a flex grid below. It takes 2 types of images, one a square and another a 16/9 rectangle. As you can see from the demo below, the heights dont match up due to the different aspect rations. Is there a way to "match" heights and maintain the aspect ratios? Or is this not possible?
Ideally, setting a max height would be great and have the width auto adjust based on that but I can't seem to get that working.
.root {
width: 100%;
max-width: 1200px;
}
.container {
display: flex;
flex-wrap: wrap;
width: 100%;
padding-left: -10px;
padding-right: -10px;
}
.box1 {
max-width: 200px;
flex: 1 0 23%;
padding: 10px;
}
.box2 {
max-width: 300px;
flex: 1 0 33%;
padding: 10px;
}
img {
width: 100%;
}
<div class="root">
<div class="container">
<div class="box1">
<img src="https://play-lh.googleusercontent.com/IeNJWoKYx1waOhfWF6TiuSiWBLfqLb18lmZYXSgsH1fvb8v1IYiZr5aYWe0Gxu-pVZX3=s180-rw"/>
</div>
<div class="box2">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/80/Aspect_ratio_-_16x9.svg/1200px-Aspect_ratio_-_16x9.svg.png" />
</div>
<div class="box1">
<img src="https://play-lh.googleusercontent.com/IeNJWoKYx1waOhfWF6TiuSiWBLfqLb18lmZYXSgsH1fvb8v1IYiZr5aYWe0Gxu-pVZX3=s180-rw"/>
</div>
<div class="box1">
<img src="https://play-lh.googleusercontent.com/IeNJWoKYx1waOhfWF6TiuSiWBLfqLb18lmZYXSgsH1fvb8v1IYiZr5aYWe0Gxu-pVZX3=s180-rw"/>
</div>
<div class="box1">
<img src="https://play-lh.googleusercontent.com/IeNJWoKYx1waOhfWF6TiuSiWBLfqLb18lmZYXSgsH1fvb8v1IYiZr5aYWe0Gxu-pVZX3=s180-rw"/>
</div>
<div class="box1">
<img src="https://play-lh.googleusercontent.com/IeNJWoKYx1waOhfWF6TiuSiWBLfqLb18lmZYXSgsH1fvb8v1IYiZr5aYWe0Gxu-pVZX3=s180-rw"/>
</div>
<div class="box1">
<img src="https://play-lh.googleusercontent.com/IeNJWoKYx1waOhfWF6TiuSiWBLfqLb18lmZYXSgsH1fvb8v1IYiZr5aYWe0Gxu-pVZX3=s180-rw"/>
</div>
<div class="box1">
<img src="https://play-lh.googleusercontent.com/IeNJWoKYx1waOhfWF6TiuSiWBLfqLb18lmZYXSgsH1fvb8v1IYiZr5aYWe0Gxu-pVZX3=s180-rw"/>
</div>
<div class="box2">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/80/Aspect_ratio_-_16x9.svg/1200px-Aspect_ratio_-_16x9.svg.png" />
</div>
<div class="box1">
<img src="https://play-lh.googleusercontent.com/IeNJWoKYx1waOhfWF6TiuSiWBLfqLb18lmZYXSgsH1fvb8v1IYiZr5aYWe0Gxu-pVZX3=s180-rw"/>
</div>
<div class="box1">
<img src="https://play-lh.googleusercontent.com/IeNJWoKYx1waOhfWF6TiuSiWBLfqLb18lmZYXSgsH1fvb8v1IYiZr5aYWe0Gxu-pVZX3=s180-rw"/>
</div>
<div class="box1">
<img src="https://play-lh.googleusercontent.com/IeNJWoKYx1waOhfWF6TiuSiWBLfqLb18lmZYXSgsH1fvb8v1IYiZr5aYWe0Gxu-pVZX3=s180-rw"/>
</div>
<div class="box2">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/80/Aspect_ratio_-_16x9.svg/1200px-Aspect_ratio_-_16x9.svg.png" />
</div>
<div class="box1">
<img src="https://play-lh.googleusercontent.com/IeNJWoKYx1waOhfWF6TiuSiWBLfqLb18lmZYXSgsH1fvb8v1IYiZr5aYWe0Gxu-pVZX3=s180-rw"/>
</div>
<div class="box1">
<img src="https://play-lh.googleusercontent.com/IeNJWoKYx1waOhfWF6TiuSiWBLfqLb18lmZYXSgsH1fvb8v1IYiZr5aYWe0Gxu-pVZX3=s180-rw"/>
</div>
<div class="box1">
<img src="https://play-lh.googleusercontent.com/IeNJWoKYx1waOhfWF6TiuSiWBLfqLb18lmZYXSgsH1fvb8v1IYiZr5aYWe0Gxu-pVZX3=s180-rw"/>
</div>
<div class="box1">
<img src="https://play-lh.googleusercontent.com/IeNJWoKYx1waOhfWF6TiuSiWBLfqLb18lmZYXSgsH1fvb8v1IYiZr5aYWe0Gxu-pVZX3=s180-rw"/>
</div>
<div class="box1">
<img src="https://play-lh.googleusercontent.com/IeNJWoKYx1waOhfWF6TiuSiWBLfqLb18lmZYXSgsH1fvb8v1IYiZr5aYWe0Gxu-pVZX3=s180-rw"/>
</div>
</div>

How to create an HTML grid where cells grow to an exact width and extra height is hidden?

I am trying to style a page that shows a list of uploaded photos.
The requirements are (applied in this order in case of ambiguity):
The photos must be in a grid
There must be 3 columns
A photo that is too wide must shrink to the column width
A photo that is too narrow must grow to the column width
A photo that is shorter than it is wide is left as it is
A photo that is taller than it is wide is truncated (overflow hidden)
I can do all of the above except for the last one.
I tried the trick with padding-top: 100% but all that seemed to do was make everything twice as tall.
So how can I hide the overflow on a cell with defined width and aspect ratio?
.container {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}
.box {
margin: 1rem;
width: calc((100% - 1rem * 6) / 3);
}
.box img {
width: 100%;
}
.green {
background-color: green;
}
.red {
background-color: red;
}
<div class="container">
<div class="box green">
<img src="https://dummyimage.com/200x200/000/fff">
</div>
<div class="box green">
<img src="https://dummyimage.com/100x100/000/fff">
</div>
<div class="box green">
<img src="https://dummyimage.com/200x200/000/fff">
</div>
<div class="box green">
<img src="https://dummyimage.com/200x200/000/fff">
</div>
<div class="box green">
<img src="https://dummyimage.com/300x200/000/fff">
</div>
<div class="box green">
<img src="https://dummyimage.com/200x200/000/fff">
</div>
<div class="box red">
<img src="https://dummyimage.com/200x200/000/fff">
</div>
<div class="box red">
<img src="https://dummyimage.com/200x300/000/fff">
</div>
<div class="box red">
<img src="https://dummyimage.com/200x200/000/fff">
</div>
</div>

Woops ok so I tried the padding-top: 100% top trick again and this time it worked.
You cannot apply it to the children of the flex container (i.e. the .box) directly, you must have another box inside it like this:
.container {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}
.box {
margin: 1rem;
width: calc((100% - 1rem * 6) / 3);
}
.box img {
width: 100%;
}
.green {
background-color: green;
}
.red {
background-color: red;
}
.aspect-ratio-box {
height: 0;
overflow: hidden;
padding-top: 100%;
position: relative;
}
.aspect-ratio-box-inside {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div class="container">
<div class="box green">
<div class="aspect-ratio-box">
<div class="aspect-ratio-box-inside">
<img src="https://dummyimage.com/200x200/000/fff">
</div>
</div>
</div>
<div class="box green">
<div class="aspect-ratio-box">
<div class="aspect-ratio-box-inside">
<img src="https://dummyimage.com/100x100/000/fff">
</div>
</div>
</div>
<div class="box green">
<div class="aspect-ratio-box">
<div class="aspect-ratio-box-inside">
<img src="https://dummyimage.com/200x200/000/fff">
</div>
</div>
</div>
<div class="box green">
<div class="aspect-ratio-box">
<div class="aspect-ratio-box-inside">
<img src="https://dummyimage.com/200x200/000/fff">
</div>
</div>
</div>
<div class="box green">
<div class="aspect-ratio-box">
<div class="aspect-ratio-box-inside">
<img src="https://dummyimage.com/300x200/000/fff">
</div>
</div>
</div>
<div class="box green">
<div class="aspect-ratio-box">
<div class="aspect-ratio-box-inside">
<img src="https://dummyimage.com/200x200/000/fff">
</div>
</div>
</div>
<div class="box red">
<div class="aspect-ratio-box">
<div class="aspect-ratio-box-inside">
<img src="https://dummyimage.com/200x200/000/fff">
</div>
</div>
</div>
<div class="box red">
<div class="aspect-ratio-box">
<div class="aspect-ratio-box-inside">
<img src="https://dummyimage.com/200x300/000/fff">
</div>
</div>
</div>
<div class="box red">
<div class="aspect-ratio-box">
<div class="aspect-ratio-box-inside">
<img src="https://dummyimage.com/200x200/000/fff">
</div>
</div>
</div>
</div>
It also fixed that weird extra bit that was showing at the bottom.

Why after the third row the float property does not work correctly? [duplicate]

This question already has answers here:
Floated elements of variable height push siblings down
(3 answers)
What is a clearfix?
(10 answers)
What methods of ‘clearfix’ can I use?
(29 answers)
Closed 2 years ago.
After some rows the css float property have a strange behavior that i couldn't know its reason.
Take into account that I cannot add a div with a "clear" property between the rows because the html will be generated dynamically (php loop).
I think that in order to do that I should create a function in php that determines when to insert a clear div between the rows because sometimes there are 2 images per and other times 3.
But I prefer a CSS solution.
Here is the full code:
.row {
width: 600px;
text-align: center;
margin: 0 auto;
}
.boxes{
box-sizing: border-box;
position: relative;
min-height: 1px;
height: auto;
float: left;
padding-left: 10px;
padding-bottom: 10px;
}
.box1 {
width: 33.33333333333333%;
}
.box2 {
width: 66.66666666666666%;
}
.box-inner {
background-color: grey;
width: 100%;
height: 100%;
}
.img-responsive {
display: block;
max-width: 100%;
height: auto;
}
<html>
<body>
<div class="row">
<div class="box1 boxes">
<div class="box-inner">
<img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
</div>
</div>
<div class="box1 boxes">
<div class="box-inner">
<img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
</div>
</div>
<div class="box1 boxes">
<div class="box-inner">
<img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
</div>
</div>
<div class="box1 boxes">
<div class="box-inner">
<img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
</div>
</div>
<div class="box2 boxes">
<div class="box-inner">
<img class="img-responsive" src="https://picsum.photos/770/238?random=1" alt="">
</div>
</div>
<div class="box2 boxes">
<div class="box-inner">
<img class="img-responsive" src="https://picsum.photos/770/238?random=1" alt="">
</div>
</div>
<div class="box1 boxes">
<div class="box-inner">
<img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
</div>
</div>
<div class="box1 boxes">
<div class="box-inner">
<img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
</div>
</div>
<div class="box1 boxes">
<div class="box-inner">
<img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
</div>
</div>
<div class="box1 boxes">
<div class="box-inner">
<img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
</div>
</div>
</div>
</body>
</html>

In your example, you have an image that's slightly shorter than the one before it. That's causing the gap on the following row which clear would normally fix. if you had the same number of elements per row then something like nth-child could be used with clear, but since you said the number of elements per line could change, that wouldn't work. An easy fix is to set a minimum height on your .box-inner class:
.row {
width: 600px;
text-align: center;
margin: 0 auto;
}
.boxes {
box-sizing: border-box;
position: relative;
min-height: 1px;
height: auto;
float: left;
padding-left: 10px;
padding-bottom: 10px;
}
.box1 {
width: 33.33333333333333%;
}
.box2 {
width: 66.66666666666666%;
}
.box-inner {
background-color: grey;
width: 100%;
height: 100%;
min-height: 122px;
}
.img-responsive {
display: block;
max-width: 100%;
height: auto;
}
<div class="row">
<div class="box1 boxes">
<div class="box-inner">
<img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
</div>
</div>
<div class="box1 boxes">
<div class="box-inner">
<img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
</div>
</div>
<div class="box1 boxes">
<div class="box-inner">
<img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
</div>
</div>
<div class="box1 boxes">
<div class="box-inner">
<img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
</div>
</div>
<div class="box2 boxes">
<div class="box-inner">
<img class="img-responsive" src="https://picsum.photos/770/238?random=1" alt="">
</div>
</div>
<div class="box2 boxes">
<div class="box-inner">
<img class="img-responsive" src="https://picsum.photos/770/238?random=1" alt="">
</div>
</div>
<div class="box1 boxes">
<div class="box-inner">
<img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
</div>
</div>
<div class="box1 boxes">
<div class="box-inner">
<img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
</div>
</div>
<div class="box1 boxes">
<div class="box-inner">
<img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
</div>
</div>
<div class="box1 boxes">
<div class="box-inner">
<img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
</div>
</div>
</div>

The easiest solution is to add a fixed height to your container.
.box-inner {
background-color: grey;
width: 100%;
height: 120px;
overflow: hidden;
}
Another addition to the above is to add object-fit: cover to your image to ensure it fills the container space.
.box-inner img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}

How to make div height to be always proportional of its width (without hacks)?

I have a Flexbox div with 12 images within. I want width of every image to be 25% of that div. That image must have height = 133,33% of width. And in case image has dimensions that not equal to my 3*4, image has to be scaled to fit my 3*4. So how can I achieve that? I think I need a tool like calc(width*4/3).
My css and html:
.image-grid {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
width: 100%;
}
.image-grid .image-wrapper {
width: 25%;
height: 133.3333%; // nothing happens if I delete this line. Flexbox?
}
.image-grid .image {
display: block;
width: 100%;
object-fit: cover;
}
<div class="image-grid">
<div class="image-wrapper"><img src="assets/img/portfolio-1.jpg" alt="" class="image"></div>
<div class="image-wrapper"><img src="assets/img/portfolio-2.jpg" alt="" class="image"></div>
<div class="image-wrapper"><img src="assets/img/portfolio-3.jpg" alt="" class="image"></div>
<div class="image-wrapper"><img src="assets/img/portfolio-4.jpg" alt="" class="image"></div>
<div class="image-wrapper"><img src="assets/img/portfolio-5.jpg" alt="" class="image"></div>
<div class="image-wrapper"><img src="assets/img/portfolio-6.jpg" alt="" class="image"></div>
<div class="image-wrapper"><img src="assets/img/portfolio-7.jpg" alt="" class="image"></div>
<div class="image-wrapper"><img src="assets/img/portfolio-8.jpg" alt="" class="image"></div>
<div class="image-wrapper"><img src="assets/img/portfolio-9.jpg" alt="" class="image"></div>
<div class="image-wrapper"><img src="assets/img/portfolio-10.jpg" alt="" class="image"></div>
<div class="image-wrapper"><img src="assets/img/portfolio-11.jpg" alt="" class="image"></div>
<div class="image-wrapper"><img src="assets/img/portfolio-12.jpg" alt="" class="image"></div>
</div>
My code works perfect with images that are exactly 3*4, but if an image has other dimensions, I get that:
Ok, the solution is found. Just set wrapper's padding as 133.33% instead of height (and set my img's position as absolute). This is what I'd call a "trick" or "hack", but it solves my problem rather clearly. More details here: description

you can maintain a 3:4 aspect-ratio on the wrapper by putting padding-top: 133.33%on it.
So instead of setting the height, you can set the padding.
Also you need to set position: relative to the wrapper and position: absolute to the child, so the positioning of the child ignores the padding.
there's an example in the following snippet:
.row {
display: flex;
flex-wrap: wrap;
}
.column {
width: 25%;
}
.wrapper {
padding-top: 133.33%;
border: 1px solid red;
position: relative;
}
.wrapper img {
position: absolute;
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
bottom: 0;
right: 0;
object-fit: cover;
}
<div class="row">
<div class="column">
<div class="wrapper">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcREb_QCChITKrV0oIljZeP1irlF4UT74fQbJYNiawkZ9efEgREQoA">
</div>
</div>
<div class="column">
<div class="wrapper">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcREb_QCChITKrV0oIljZeP1irlF4UT74fQbJYNiawkZ9efEgREQoA">
</div>
</div>
<div class="column">
<div class="wrapper">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcREb_QCChITKrV0oIljZeP1irlF4UT74fQbJYNiawkZ9efEgREQoA">
</div>
</div>
<div class="column">
<div class="wrapper">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcREb_QCChITKrV0oIljZeP1irlF4UT74fQbJYNiawkZ9efEgREQoA">
</div>
</div>
<div class="column">
<div class="wrapper">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcREb_QCChITKrV0oIljZeP1irlF4UT74fQbJYNiawkZ9efEgREQoA">
</div>
</div>
<div class="column">
<div class="wrapper">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcREb_QCChITKrV0oIljZeP1irlF4UT74fQbJYNiawkZ9efEgREQoA">
</div>
</div>
<div class="column">
<div class="wrapper">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcREb_QCChITKrV0oIljZeP1irlF4UT74fQbJYNiawkZ9efEgREQoA">
</div>
</div>
<div class="column">
<div class="wrapper">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcREb_QCChITKrV0oIljZeP1irlF4UT74fQbJYNiawkZ9efEgREQoA">
</div>
</div>
<div class="column">
<div class="wrapper">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcREb_QCChITKrV0oIljZeP1irlF4UT74fQbJYNiawkZ9efEgREQoA">
</div>
</div>
<div class="column">
<div class="wrapper">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcREb_QCChITKrV0oIljZeP1irlF4UT74fQbJYNiawkZ9efEgREQoA">
</div>
</div>
<div class="column">
<div class="wrapper">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcREb_QCChITKrV0oIljZeP1irlF4UT74fQbJYNiawkZ9efEgREQoA">
</div>
</div>
<div class="column">
<div class="wrapper">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcREb_QCChITKrV0oIljZeP1irlF4UT74fQbJYNiawkZ9efEgREQoA">
</div>
</div>
<div class="column">
<div class="wrapper">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcREb_QCChITKrV0oIljZeP1irlF4UT74fQbJYNiawkZ9efEgREQoA">
</div>
</div>
</div>

Try this:
.image-grid {
display: flex;
flex-wrap: wrap;
}
.image-grid .image-wrapper {
position: relative;
width: 25%;
height: 0;
padding-bottom: 33.3333%;
}
.image-grid .image {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
}
<div class="image-grid">
<div class="image-wrapper"><img src="https://picsum.photos/200/300?1.jpg" alt="" class="image"></div>
<div class="image-wrapper"><img src="https://picsum.photos/300/200?2.jpg" alt="" class="image"></div>
<div class="image-wrapper"><img src="https://picsum.photos/200/200?3.jpg" alt="" class="image"></div>
<div class="image-wrapper"><img src="https://picsum.photos/300/300?4.jpg" alt="" class="image"></div>
<div class="image-wrapper"><img src="https://picsum.photos/300/400?5.jpg" alt="" class="image"></div>
<div class="image-wrapper"><img src="https://picsum.photos/200/200?6.jpg" alt="" class="image"></div>
<div class="image-wrapper"><img src="https://picsum.photos/200/200?7.jpg" alt="" class="image"></div>
<div class="image-wrapper"><img src="https://picsum.photos/200/400?8.jpg" alt="" class="image"></div>
<div class="image-wrapper"><img src="https://picsum.photos/400/200?9.jpg" alt="" class="image"></div>
<div class="image-wrapper"><img src="https://picsum.photos/200/200?1.jpg" alt="" class="image"></div>
<div class="image-wrapper"><img src="https://picsum.photos/200/200?2.jpg" alt="" class="image"></div>
<div class="image-wrapper"><img src="https://picsum.photos/200/200?4.jpg" alt="" class="image"></div>
</div>

Here's an idea that should work if the container spans the complete width of the window:
Make the image container 25% wide and 25vw*4/3 high (there you have your calc...). Also use overflow: hidden on the container to keep the fixed ratio.
Make the images 100% high and set their width to auto. This will make them fill the container vertically. Then center them by appliying transform: translate-x(-50%), position: relative and left: 50%;.
This only works for images whose height is less than 4/3 of the width, but from what I understood, that's the situation you have?
* {
margin: 0;
}
.image-grid {
display: flex;
flex-wrap: wrap;
}
.image-grid .image-wrapper {
flex-shrink: 1;
flex-grow: 0;
width: 25%;
height: calc(25vw*4/3);
overflow: hidden;
}
.image-grid .image {
height: 100%;
width: auto;
display: block;
position: relative;
left: 50%;
transform: translateX(-50%);
}
<div class="image-grid">
<div class="image-wrapper"><img src="http://lorempixel.com/output/city-h-c-300-400-1.jpg" alt="" class="image"></div>
<div class="image-wrapper"><img src="http://lorempixel.com/output/transport-h-c-300-400-5.jpg" alt="" class="image"></div>
<div class="image-wrapper"><img src="http://lorempixel.com/output/cats-h-c-300-360-6.jpg" alt="" class="image"></div>
<div class="image-wrapper"><img src="http://lorempixel.com/output/nature-h-c-300-335-10.jpg" alt="" class="image"></div>
<div class="image-wrapper"><img src="http://lorempixel.com/output/transport-h-c-300-400-5.jpg" alt="" class="image"></div>
<div class="image-wrapper"><img src="http://lorempixel.com/output/cats-h-c-300-360-6.jpg" alt="" class="image"></div>
<div class="image-wrapper"><img src="http://lorempixel.com/output/nature-h-c-300-335-10.jpg" alt="" class="image"></div>
<div class="image-wrapper"><img src="http://lorempixel.com/output/city-h-c-300-400-1.jpg" alt="" class="image"></div>
<div class="image-wrapper"><img src="http://lorempixel.com/output/cats-h-c-300-360-6.jpg" alt="" class="image"></div>
<div class="image-wrapper"><img src="http://lorempixel.com/output/city-h-c-300-400-1.jpg" alt="" class="image"></div>
<div class="image-wrapper"><img src="http://lorempixel.com/output/transport-h-c-300-400-5.jpg" alt="" class="image"></div>
<div class="image-wrapper"><img src="http://lorempixel.com/output/nature-h-c-300-335-10.jpg" alt="" class="image"></div>
</div>

Make the image layout more organized using bootstrap and CSS

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?

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%;}
}

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; }