107

Estou tentando há alguns dias configurar minha galeria de miniaturas para que todas as imagens tenham a mesma altura e largura. No entanto, quando eu mudo o código Css para,

max-height: 150px;
max-width: 200px;
width: 120px;
height: 120px;

Recebo imagens do mesmo tamanho, mas a proporção da imagem é esticada, estragando as imagens. não há uma maneira de redimensionar o contêiner da imagem e não a imagem? permitindo-me manter a proporção. mas redimensione a imagem ainda. (Não me importo se eu cortar parte da imagem.)

Desde já, obrigado!

html css gallery lightbox Beaniie
fonte

184

este é um problema conhecido com redimensionamento CSS, a menos que todas as imagens tenham a mesma proporção, você não tem como fazer isso via CSS.

A melhor abordagem seria ter um container, e redimensionar uma das dimensões (sempre a mesma) das imagens. No meu exemplo, redimensionei a largura.

Se o contêiner tiver uma dimensão especificada (no meu exemplo a largura), ao dizer à imagem para ter a largura de 100%, ela fará com que ela tenha a largura total do contêiner. O autona altura fará com que a imagem tenha a altura proporcional à nova largura.

Ex:

HTML:

<div class="container">
<img src="something.png" />
</div>

<div class="container">
<img src="something2.png" />
</div>

CSS:

.container {
    width: 200px;
    height: 120px;
}

/* resize images */
.container img {
    width: 100%;
    height: auto;
}

jackJoe
fonte

41

Você precisa corrigir um lado (por exemplo, altura) e definir o outro como auto.

Por exemplo

 height: 120px;
 width: auto;

Isso escalaria a imagem com base em apenas um lado. Se você achar que cortar a imagem é aceitável, você pode apenas definir

overflow: hidden;

para o elemento pai, que cortaria qualquer coisa que, de outra forma, excedesse seu tamanho.

Nick Andriopoulos
fonte

Eu tentei isso, mas ainda me dá imagens com tamanhos e formas diferentes. Quero que a galeria seja uniforme, assim, [] [] [] [] diferente de [] [] [] [] []

Gorro

2

use uma combinação de ambos: definir a altura como um número (com largura automática para manter a escala) e limitar o pai a uma largura específica overflow: hiddenpara cortar o excesso

Nick Andriopoulos

25

Você pode usar a object-fitpropriedade css3, algo como

<!doctype html>
<html>

<head>
  <meta charset='utf-8'>
  <style>
    .holder {
      display: inline;
    }
    .holder img {
      max-height: 200px;
      max-width: 200px;
      object-fit: cover;
    }
  </style>
</head>

<body>
  <div class='holder'>
    <img src='meld.png'>
  </div>
  <div class='holder'>
    <img src='twiddla.png'>
  </div>
  <div class='holder'>
    <img src='meld.png'>
  </div>
</body>

</html>

Expandir trecho

Não é exatamente a sua resposta, porém, porque não estica o contêiner, mas se comporta como a galeria e você pode continuar a estilizá-la img.

Outra desvantagem desta solução ainda é um suporte insuficiente da propriedade css3. Mais detalhes estão disponíveis aqui: http://www.steveworkman.com/html5-2/javascript/2012/css3-object-fit-polyfill/ . A solução jQuery também pode ser encontrada lá.

dmitry_romanov
fonte

Obrigado, boa solução. :)

Bibhu

Isso é meio estranho de responder com uma propriedade que só é compatível com opera atm ?! caniuse.com/object-fit

Simon Dragsbæk

4

Eu vejo seu ponto, @Simon, obrigado. Eu mencionei que não tenho ideia se a propriedade será suportada em todos os lugares, mas mesmo que não , podemos usá-la como um ponto de partida para procurar alternativas no Google para substituí-la. Outro motivo para postar é que a resposta ficaria por algum tempo enquanto os navegadores melhoram a cada dia, então respondi visando esse futuro próximo também.

dmitry_romanov

1

Chegando a esta página vários anos depois, fiquei feliz em encontrar essa resposta do "futuro"!

petzi

8

Para tornar as imagens ajustáveis / flexíveis, você pode usar isto:

/* fit images to container */
.container img {
    max-width: 100%;
    height: auto;
}

Stanislav
fonte

5

Coloque-o como pano de fundo em seu suporte, por exemplo

<div style="background:url(path/to/image/myimage.jpg) center center; width:120px; height:120px;">
&nbsp;
</div>

Isso centralizará sua imagem dentro de um div 120x120 cortando qualquer excesso da imagem

DickieBoy
fonte

2

Se você não quiser esticar a imagem, ajuste-a no contêiner div sem estourar e centralize-a ajustando sua margem, se necessário.

A imagem não será cortada
A proporção da imagem também permanecerá a mesma.

HTML:

<div id="app">
    <div id="container">
      <img src="#" alt="something">
    </div>
    <div id="container">
      <img src="#" alt="something">
    </div>
    <div id="container">
      <img src="#" alt="something">
    </div>
</div>

CSS:

div#container {
    height: 200px;
    width: 200px;
    border: 1px solid black;
    margin: 4px;
}
img {
    max-width: 100%;
    max-height: 100%;
    display: block;
    margin: 0 auto;
}

Bhushan Dangore
fonte

0

transform: scale(0.5);

Exemplo:

<div>Normal</div>
<div class="scaled">Scaled</div>

div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.scaled {
  transform: scale(0.7); /* Equal to scaleX(0.7) scaleY(0.7) */
  background-color: pink;
}

consulte: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale

Mahmoud K.
fonte

-1

se você souber a relação de projeção, pode usar o acolchoamento inferior com porcentagem para definir a altura dependendo da diferença.

<div>
   <div style="padding-bottom: 33%;">
      i have 33% height of my parents width
   </div>
</div>

reco
fonte

Alterar o tamanho das imagens proporcionalmente usando CSS?

Respostas:

HTML:

CSS:

Exemplo: