How to align images of different sizes in responsive layout?

Question

I don’t know how to deal with the following problem.

I was trying to work with the <li class="filme">, with its responsive size, but as each image has a variable size. When it reaches a certain size the images begin to break the layout. If I set the image size, baby <li class="filme"> to begin to grow more than the image. Yes, the <li> is in % and the pixel image. If I set the width da li as auto(to occupy the image size) my layout as it grows becomes a blank space in the layout.

HTML:

<main class="principal">
    <section class="section-filmes">
        <ul id="lista-filmes" class="lista-filmes">
            <!-- Lista de filmes aqui..-->
            <li class="filme"> <img src="img-filme"> </li>
        </ul>
    </section>
</main>

CSS:

img{ max-width 100% }
.lista-filmes::after{
    content: '';
    display: block;
    clear: both;
}
.lista-filmes .filme{
    width: 100%;
    display: block;
    float: left;
    background: #fff;
    padding: 1rem;
    margin-bottom: 1rem;
    box-shadow: 0 1px 1px rgba(0,0,0,.2);
}

Note: Movie images are variable sizes, example 400x600 300x450 800x900 and etc.

I wonder if you have any solution to make the images responsive, without breaking the layout.

The idea is that in the end it stays like this: click here to see

But responsive.

Answer 1

The max-width: 100% is correct, because then the images will self-improve within the li up to its maximum width or the width of the li, whichever is less.

Since the widths of the images are variable, what remains to do is to center the images, and you can do this by adding:

.lista-filmes .filme img{
   max-width: 100%;
   display: block;
   margin: 0 auto;
}

Example:

.lista-filmes .filme img{
   max-width: 100%;
   display: block;
   margin: 0 auto;
}

.lista-filmes::after{
    content: '';
    display: block;
    clear: both;
}
.lista-filmes .filme{
    width: 100%;
    display: block;
    float: left;
    background: #fff;
    padding: 1rem;
    margin-bottom: 1rem;
    box-shadow: 0 1px 1px rgba(0,0,0,.2);
}

<main class="principal">
    <section class="section-filmes">
        <ul id="lista-filmes" class="lista-filmes">
            // Lista de filmes aqui..
            <li class="filme"> <img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg"> </li>
            <li class="filme"> <img src="https://a.edim.co/images_v2/opengraph/og_logo.png"> </li>
        </ul>
    </section>
</main>

Another solution would be to put a span and insert the image as background. As the images vary in size, there may be cuts, but the images will be centered:

.lista-filmes::after{
    content: '';
    display: block;
    clear: both;
}
.lista-filmes .filme{
    width: 100%;
    max-width: 150px;
    display: block;
    float: left;
    background: #fff;
    padding: 1rem;
    margin: .5rem;
    box-shadow: 0 1px 1px rgba(0,0,0,.2);
}

#lista-filmes .filme span{
   display: inline-block;
   width: 100%;
   height: 300px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50%;
}

<main class="principal">
    <section class="section-filmes">
        <ul id="lista-filmes" class="lista-filmes">
            <li class="filme">
               <span style="background-image: url(https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg);"></span>
               texto texto
            </li>
            <li class="filme">
               <span style="background-image: url(https://a.edim.co/images_v2/opengraph/og_logo.png);"></span>
               texto texto
            </li>
        </ul>
    </section>
</main>