0

Estou fazendo uma galeria de imagens com o plugin FancyBox.Estou fazendo a listagem das imagens com o PHP, só que tenho um problema.

Eu vou poder ter imagens com largura e alturas diferentes, então como vou sempre aplicar uma largura e altura fixa para todas as imagens, sem distorcer as imagens, e sem estourar?

1 Resposta 1

0

Você precisa criar um elemento de tamanho fixo ao redor da imagem, e com um pouco de CSS você consegue o resultado que procura:

img.max-fit {
  max-width: 100%;
  max-height: 100%;
}

div.img-fit {
  float: left;
  margin: 5px;
  border: 1px solid black;
  width: 300px;
  height: 300px;
  overflow: hidden;
  background-color: #ccc;
  padding: 0;
  //  margin: 0;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
<div class='img-fit'>
  <img src="https://jquery.com/jquery-wp-content/themes/jquery.com/i/try-jquery.jpg" class='max-fit' />
</div>
<div class='img-fit'>
  <img src="https://jquery.com/jquery-wp-content/themes/jquery/content/books/learning-jquery-4th-ed.jpg" class='max-fit' />
</div>
<div class='img-fit'>
  <img src="https://www.google.com/logos/doodles/2017/brazil-national-day-2017-4807172314628096-2xa.gif" class='max-fit' />
</div>
<div class='img-fit'>
  <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSdaU9Gk1ptaWF7kr34uUSg0ETD-o57nL1Db2hW392fQa1nZIZIc_9R9-Qr" class='max-fit' />
</div>

Exemplo no jsfiddle: http://jsfiddle.net/kn0yosfd/1/

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .