How to align images of different sizes in responsive layout?

Question

How to align images of different sizes in responsive layout?

Navigation

#1 by (0 votes)

1

I'm not sure how to deal with the following problem.

I was trying to work with <li class="filme"> , with its responsive size, however as each image has a variable size. When it arrives at a certain size the images begin to break the layout. If I set the images size, my <li class="filme"> to start growing more than the image. For% w / o% is in% and pixel image. If I set the <li> of the li to auto (to occupy the image size) my layout as it grows gets 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 would like to know if you have any solution to make the images responsive, without breaking the layout.

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

But responsive.

html css

asked by anonymous 24.04.2018 / 00:25

1 answer

Check network connection with Excel VBA JPQL Not recognizing the parameter

score 0 · Answer 1

% w / o% is correct, so images will self-adjust within% w /% to maximum width or width% w / w, whichever is less.

As the widths of the images are variable, what remains to be done 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><liclass="filme"> <img src="https://a.edim.co/images_v2/opengraph/og_logo.png"></li></ul></section></main>

Anothersolutionwouldbetoputamax-width:100%andinserttheimageasbackground.Sincetheimagesvaryinsize,theremaybecuts,buttheimageswillbecentered:

.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>