CSS - Keep image aspect ration flexbox - html

Question

I have a small photo gallery with some photo's.
It looks good on pc (full size), but when I resize it (for phone), it does not keep it's aspect ratio and it only streches the with.
This is what it looks like right now: https://gyazo.com/a1f605bb410865579025644b0a267adf
Also, as you can see it goes to 1 image, and at a certain point it goes back to 2 images for a split second and it stays on 1 image after. How do I fix that too?
This is my CSS:
#images{
display: flex;
flex-wrap: wrap;
}
.image{
display: flex;
flex: 1;
margin: 5px;
min-width: 250px;
min-height: 187.5px;
object-fit: contain;
}
.image > img{
flex: 1;
}
This is my HTML:
<div id="images">
<div class="image">
<img src="f1.jpg">
</div>
<div class="image">
<img src="f2.jpg">
</div>
<div class="image">
<img src="f3.jpg">
</div>
<div class="image">
<img src="f1.jpg">
</div>
//it just goes on and on like this
//it's all temporary now, I will eventualy replace
//this with a simple loop.
</div>

Answer 1

Unless you have very specific requirements, I suggest Masonry:
a JavaScript grid layout library. It works by placing elements in
optimal position based on available vertical space, sort of like a
mason fitting stones in a wall. You’ve probably seen it in use all
over the Internet.
in combination with imagesLoaded For a versatile lightweight solution.
There are many ways to implement Masonry.
The following is my personal favorite.
All my comments are inside the snippet below
body {
background: #131418;
}
/* Step 1: start with resetting some defaults */
* {
margin: 0 auto;
padding: 0;
max-width: 100%;
}
/* Step 2: center things inside the grid and clear some space around it by setting a device based max-width and margin*/
.grid {
text-align: center;
max-width: 95vw;
margin: 2.5vw auto;
}
/* Step 3: how big should the gap be between grid items? remember that the total gap between two items would be double what you set here since both would have that amount set as their individual padding. Also add box-sizing:border-box to make sure the padding doesn't affect the total widh of the item */
.grid-item {
padding: 5px;
box-sizing: border-box;
}
/* Step 4: Add media queries (subjective) to make the whole grid resposive. */
#media (min-width: 500px) {
.grid-item {
width: 50%;
}
}
#media (min-width: 1000px) {
.grid-item {
width: 33.333%;
}
}
#media (min-width: 1700px) {
.grid-item {
width: 25%;
}
}
#media (min-width: 2100px) {
.grid-item {
width: 20%;
}
}
<!-- Made possible by the great work of David DeSandro # https://masonry.desandro.com -->
<!-- Part 1: Add the scripts -->
<!-- Step 1: Let's start by loading jQuery. jQuery is not required for masonary to function but makes things easier -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Step 2: Then load imagesloaded. imagesloaded makes sure the images are not displayed until they are fully loaded -->
<script src="https://unpkg.com/imagesloaded#4/imagesloaded.pkgd.min.js"></script>
<!-- Step 3: we load masonry -->
<script src="https://unpkg.com/masonry-layout#4/dist/masonry.pkgd.min.js"></script>
<!-- Part 2: Create the grid -->
<!-- Step 1: Start with a the main grid wrapper-->
<div class="grid">
<!-- Step 2: Add grid items--->
<div class="grid-item">
<img src="https://s-media-cache-ak0.pinimg.com/736x/00/37/03/0037037f1590875493f413c1fdbd52b1--cool-beards-inspiring-photography.jpg" />
</div>
<div class="grid-item">
<img src="https://s-media-cache-ak0.pinimg.com/736x/cd/90/d9/cd90d9de63fa2c8e5c5e7117e27b5c18--gritty-portrait-photography-studio-photography.jpg">
</div>
<!-- Step 3: repeat...--->
<div class="grid-item">
<img src="https://1.bp.blogspot.com/-9QM7ciGXRkQ/V1hsB-wNLBI/AAAAAAAAMoA/eYbSHs00PTAjrI4QAmvYAIGCUe1AuRAnwCLcB/s1600/bryan_cranston_0095.jpg">
</div>
<div class="grid-item">
<img src="http://webneel.com/sites/default/files/images/project/best-portrait-photography-regina-pagles%20(10).jpg" />
</div>
<div class="grid-item">
<img src="https://s-media-cache-ak0.pinimg.com/736x/dd/45/96/dd4596b601062eb491ea9bb8e3a78062--two-faces-baby-faces.jpg" />
</div>
<div class="grid-item">
<img src="http://www.marklobo.com.au/news/wp-content/uploads/2013/03/Melbourne_Portrait_Photographer_Mark_Lobo-Cowboy.jpg" />
</div>
<div class="grid-item">
<img src="https://format-com-cld-res.cloudinary.com/image/private/s--PcYqe7Zw--/c_limit,g_center,h_65535,w_960/a_auto,fl_keep_iptc.progressive,q_95/145054-8576001-Rob-Green-by-Zuzana-Breznanikova_7725_b_w.jpg" />
</div>
<div class="grid-item">
<img src="http://www.iefimerida.gr/sites/default/files/janbanning11.jpg" />
</div>
<div class="grid-item">
<img src="https://s-media-cache-ak0.pinimg.com/736x/66/bb/e7/66bbe7acc0d64da627afef440a29714b--portrait-photos-female-portrait.jpg" />
</div>
<div class="grid-item">
<img src="https://s-media-cache-ak0.pinimg.com/736x/25/34/b6/2534b6c18c659546463f13b2dc62d4ce--natural-portraits-female-portraits.jpg" />
</div>
<div class="grid-item">
<img src="https://s-media-cache-ak0.pinimg.com/originals/8d/67/12/8d671230ced871df8428b571ed6ec192.jpg" />
</div>
</div>
<!-- Part 3: the script call -->
<!-- Now that everything is loaded we create a script to trigger masonary on $grid. Note that this simply says: "if the images are fully loaded, trigger masnory on $grid. -->
<script>
$(".grid").imagesLoaded(function() {
$(".grid").masonry({
itemSelector: ".grid-item"
});
});
</script>

Answer 2

Recently, I discover the CSS property : object-fit
She's contain multiple options :
contain
fill
cover
none
scale-down
It's very easy, and keeps a good ratio of the image
Documentation : HERE

Answer 3

UPDATE - I've added an example.
#images {
display: flex;
flex-wrap: wrap;
}
.image {
flex: 1;
}
.image img {
width: 100%;
height: auto;
}
<div id="images">
<div class="image">
<img src="https://i.guim.co.uk/img/media/4f48e55216fe5c09963e6cac4ec2530cc08a4e36/0_0_600_600/master/600.jpg?w=300&q=55&auto=format&usm=12&fit=max&s=add90ae66a8a0c9b35606346845539f9">
</div>
<div class="image">
<img src="https://i.guim.co.uk/img/media/4f48e55216fe5c09963e6cac4ec2530cc08a4e36/0_0_600_600/master/600.jpg?w=300&q=55&auto=format&usm=12&fit=max&s=add90ae66a8a0c9b35606346845539f9">
</div>
<div class="image">
<img src="https://i.guim.co.uk/img/media/4f48e55216fe5c09963e6cac4ec2530cc08a4e36/0_0_600_600/master/600.jpg?w=300&q=55&auto=format&usm=12&fit=max&s=add90ae66a8a0c9b35606346845539f9">
</div>
<div class="image">
<img src="https://i.guim.co.uk/img/media/4f48e55216fe5c09963e6cac4ec2530cc08a4e36/0_0_600_600/master/600.jpg?w=300&q=55&auto=format&usm=12&fit=max&s=add90ae66a8a0c9b35606346845539f9">
</div>
</div>
For keeping image aspect ratio, you can define width:100% and height:auto.
It will adjust the image to the width of the container with keeping the aspect ratio.