Não estou sabendo lidar com o seguinte problema.
Estava tentando trabalhar com o <li class="filme">
, com seu tamanho responsivo, porém como cada imagem tem um tamanho variável. Quando chega em determinado tamanho as imagens começam a quebrar o layout. Se defino tamanho as imagens, minha <li class="filme">
para começar a crescer mais do que a imagem. Pois, a <li>
está em % e a imagem em pixel. Se eu defino o width
da li como auto(para ocupar o tamanho da imagem) meu layout na medida que vai crescendo fica um espaço em branco no 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);
}
Obs: As imagens dos filmes são tamanhos variáveis, exemplo 400x600 300x450 800x900 e etc.
Gostaria de saber se tem alguma solução pra deixar as imagens responsivas, sem quebrar o layout.
A idéia é que no final fique assim: clique aqui para ver
Porem responsiva.