html css img resolution manipulation - html

Question

I just started working on html and css and need to understand how I can fix the below issue:
I have the following section in my html body
.section-meals {
padding: 0;
background-color: #f4f4f4;
}
.meals-showcase {
list-style: none;
width: 100%;
}
.meals-showcase li {
display: block;
float: left;
width: 25%;
}
.meal-photo {
width: 100%;
margin: 0;
overflow: hidden;
background-color: #000;
}
.meal-photo img {
/*
Width 100% + height auto set to show up the entire image in a bounded area.
This is similar to wrap content height and width in android and iOS.
*/
width: 100%;
height: 100%;
/*
Made everything bigger, but now the images are bigger than the container themselves.
So we have to hide the overflow in the container with the property hidden.
*/
transform: scale(1.30);
transition: transform 0.5s, opacity 0.5s;
opacity: 0.6;
}
.meal-photo img:hover {
opacity: 1;
transform: scale(1.03);
}
<section class="section-meals">
<ul class="meals-showcase clearfix">
<li>
<figure class='meal-photo'>
<img src="resources/img/1.jpg" alt='passport photo'>
</figure>
</li>
<li>
<figure class='meal-photo'>
<img src="resources/img/2.jpg" alt='world map'>
</figure>
</li>
<li>
<figure class='meal-photo'>
<img src="resources/img/3.jpg" alt='globe in hand'>
</figure>
</li>
<li>
<figure class='meal-photo'>
<img src="resources/img/4.jpg" alt='taj mahal'>
</figure>
</li>
</ul>
<ul class="meals-showcase clearfix">
<li>
<figure class='meal-photo'>
<img src="resources/img/5.jpg" alt='cliff with beautiful houses'>
</figure>
</li>
<li>
<figure class='meal-photo'>
<img src="resources/img/6.jpg" alt='eiffel tower'>
</figure>
</li>
<li>
<figure class='meal-photo'>
<img src="resources/img/7.jpg" alt='Maya bay'>
</figure>
</li>
<li>
<figure class='meal-photo'>
<img src="resources/img/8.jpg" alt='beach'>
</figure>
</li>
</ul>
</section>
Now when this is rendered on the webpage. I see white spaces. because my images are all of different resolution. How can I ensure that all elements in the li stick to each other with image filling the box so that it looks alright. The above works fine if all images are of the same resolution.
Code reference is from a udemy course I have picked up. but I am trying my own scenarios.
How this appears:
When all images are same resolution, this appears like, but I want a similar effect:

Answer 1

You can use the padding top trick to give your li an aspect ratio, then use object fit to make your image fit perfectly (you will also need an ie polyfill for object fit):
body {
margin:0;
}
.meals-showcase {
/* reset list styles and use flex to line up in a row */
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
}
.meals-showcase>li {
/* make li 25% width */
max-width: 25%;
width: 25%;
margin: 0;
padding: 0;
}
.meals-showcase figure {
/* make figure into block and relative position, give this the aspect ratio - here I use 75% padding top */
display: block;
width: 100%;
position: relative;
margin: 0;
padding: 75% 0 0 0;
}
.meals-showcase img {
object-fit: cover; /* add this */
display: block;
position: absolute; /* this is so it fills the figure */
width:100%;
height:100%;
top: 0;
left: 0;
transition: transform 0.5s;
}
.meal-photo img:hover {
transform: scale(1.05);
}
.meals-showcase figure:hover {
z-index:1; /* bring hover figure to front */
}
<section class="section-meals">
<ul class="meals-showcase clearfix">
<li>
<figure class='meal-photo'>
<img src="https://www.fillmurray.com/400/300" alt='passport photo'>
</figure>
</li>
<li>
<figure class='meal-photo'>
<img src="https://www.fillmurray.com/200/350" alt='world map'>
</figure>
</li>
<li>
<figure class='meal-photo'>
<img src="https://www.fillmurray.com/250/300" alt='globe in hand'>
</figure>
</li>
<li>
<figure class='meal-photo'>
<img src="https://www.fillmurray.com/300/300" alt='taj mahal'>
</figure>
</li>
</ul>
<ul class="meals-showcase clearfix">
<li>
<figure class='meal-photo'>
<img src="https://www.fillmurray.com/300/400" alt='cliff with beautiful houses'>
</figure>
</li>
<li>
<figure class='meal-photo'>
<img src="https://www.fillmurray.com/200/300" alt='eiffel tower'>
</figure>
</li>
<li>
<figure class='meal-photo'>
<img src="https://www.fillmurray.com/200/400" alt='Maya bay'>
</figure>
</li>
<li>
<figure class='meal-photo'>
<img src="https://www.fillmurray.com/200/500" alt='beach'>
</figure>
</li>
</ul>
</section>

Answer 2

This happens because indeed, the images are of different sizes. In many modern websites images are processed (thumbnailed) to be an exact size, this should avoid these issues in the first place. However, having a fail save CSS technique is a good idea.
Start off with determining the required size/aspect ratio of the images and set it in your stylesheet. This wil distort certain images that get "stretched" this effect can be cancelled by using object-fit: cover which will make sure the images covers the entire box (even if certain parts will be lost at the edges).

Answer 3

Actually to make object-fit work properly, the image container must have dimensions. In the following snippet, uncommenting /*height: 320px;*/ is enough to make it work. Of course, this dimension is static and must be the one of the smallest picture in a row.
If you want a full dynamic trick that adapts itself to the smallest picture for each row instead of specifying a given height or ratio, you can still use javascript. I made here a quick example that dynamically gets the smallest height and applies it to the elements (in jQuery).
function resizeMealPhotos(){
$('.meals-showcase').each(function(){
var h = Infinity;
$(this).find('.meal-photo').each(function(){
$(this).css('height', 'auto');
});
$(this).find('.meal-photo').each(function(){
var h2;
if( (h2 = $(this).height()) < h){
h = h2;
}
});
$(this).find('.meal-photo').each(function(){
$(this).css('height', h + 'px');
});
});
}
$(document).ready(function(){
resizeMealPhotos();
});
$(window).on('resize', resizeMealPhotos);
.section-meals {
padding: 0;
background-color: #f4f4f4;
}
.meals-showcase {
list-style: none;
width: 100%;
}
.meals-showcase li {
display: block;
float: left;
width: 25%;
}
.meal-photo {
width: 100%;
/*height: 320px;*/
margin: 0;
overflow: hidden;
background-color: #000;
}
.meal-photo img {
/*
Width 100% + height auto set to show up the entire image in a bounded area.
This is similar to wrap content height and width in android and iOS.
*/
width: 100%;
height: 100%;
object-fit: cover;
/*
Made everything bigger, but now the images are bigger than the container themselves.
So we have to hide the overflow in the container with the property hidden.
*/
transform: scale(1.30);
transition: transform 0.5s, opacity 0.5s;
opacity: 0.6;
}
.meal-photo img:hover {
opacity: 1;
transform: scale(1.03);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="section-meals">
<ul class="meals-showcase clearfix">
<li>
<figure class='meal-photo'>
<img src="https://placeimg.com/640/480/any" alt='passport photo'>
</figure>
</li>
<li>
<figure class='meal-photo'>
<img src="https://placeimg.com/640/400/any" alt='world map'>
</figure>
</li>
<li>
<figure class='meal-photo'>
<img src="https://placeimg.com/640/420/any" alt='globe in hand'>
</figure>
</li>
<li>
<figure class='meal-photo'>
<img src="https://placeimg.com/480/480/any" alt='taj mahal'>
</figure>
</li>
</ul>
<ul class="meals-showcase clearfix">
<li>
<figure class='meal-photo'>
<img src="https://placeimg.com/480/480/any" alt='cliff with beautiful houses'>
</figure>
</li>
<li>
<figure class='meal-photo'>
<img src="https://placeimg.com/640/480/any" alt='eiffel tower'>
</figure>
</li>
<li>
<figure class='meal-photo'>
<img src="https://placeimg.com/640/320/any" alt='Maya bay'>
</figure>
</li>
<li>
<figure class='meal-photo'>
<img src="https://placeimg.com/640/400/any" alt='beach'>
</figure>
</li>
</ul>
</section>

Answer 4

try below code snippet.
can try different size in https://picsum.photos/120/300/?random
.section-meals {
padding: 0;
background-color: #f4f4f4;
margin: 0;
}
.meals-showcase {
list-style: none;
width: 100%;
}
.meals-showcase li {
display: inline-block;
float: left;
width: 25%;
}
.meal-photo {
width: 100%;
height: 100px;
position: relative;
overflow: hidden;
margin: 0;
}
.meal-photo img {
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(1.12);
transition: transform 0.35s;
}
.meal-photo img:hover {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
<section class="section-meals">
<ul class="meals-showcase clearfix">
<li>
<figure class='meal-photo'>
<img src="https://picsum.photos/80/100/?random
" alt='passport photo'>
</figure>
</li>
<li>
<figure class='meal-photo'>
<img src="https://picsum.photos/106/130/?random
" alt='world map'>
</figure>
</li>
<li>
<figure class='meal-photo'>
<img src="https://picsum.photos/114/90/?random
" alt='passport photo'>
</figure>
</li>
<li>
<figure class='meal-photo'>
<img src="https://picsum.photos/90/100/?random
" alt='taj mahal'>
</figure>
</li>
</ul>
<ul class="meals-showcase clearfix">
<li>
<figure class='meal-photo'>
<img src="https://picsum.photos/144/360/?random
" alt='passport photo'>
</figure>
</li>
<li>
<figure class='meal-photo'>
<img src="https://picsum.photos/130/300/?random
" alt='eiffel tower'>
</figure>
</li>
<li>
<figure class='meal-photo'>
<img src="https://picsum.photos/140/300/?random
" alt='Maya bay'>
</figure>
</li>
<li>
<figure class='meal-photo'>
<img src="https://picsum.photos/120/300/?random
" alt='beach'>
</figure>
</li>
</ul>
</section>