Como posso fazer com que todas as imagens de alturas e larguras diferentes sejam iguais via CSS?

88

Estou tentando criar uma parede de imagens com fotos de produtos. Infelizmente, todos eles têm alturas e larguras diferentes. Como posso usar css para fazer com que todas as imagens tenham o mesmo tamanho? de preferência 100 x 100.

Eu estava pensando em fazer um div com altura e largura de 100px e, em seguida, preenchê-lo de alguma forma. NÃO tenho certeza de como fazer isso.

Como posso fazer isso?

Ariel
fonte
1
faça os divs com altura / largura fixas, então preencha as imagens com um overflow:nonee centralize a imagem horizontal / verticalmente dentro do div.
Marc B,
2
@MarcB Acho que você quer dizer overflow: hidden;. :)
insira o nome de usuário aqui
1
@MarcB não existe overflow:noneem css. Mesmo overflow:hiddennão resolverá o problema.
Rajesh Paul,

Respostas:

171

Resposta atualizada (sem suporte para IE11)

img {
    float: left;
    width:  100px;
    height: 100px;
    object-fit: cover;
}
<img src="http://i.imgur.com/tI5jq2c.jpg">
<img src="http://i.imgur.com/37w80TG.jpg">
<img src="http://i.imgur.com/B1MCOtx.jpg">

Resposta original

.img {
    float: left;
    width:  100px;
    height: 100px;
    background-size: cover;
}
<div class="img" style="background-image:url('http://i.imgur.com/tI5jq2c.jpg');"></div>
<div class="img" style="background-image:url('http://i.imgur.com/37w80TG.jpg');"></div>
<div class="img" style="background-image:url('http://i.imgur.com/B1MCOtx.jpg');"></div>

Simon Arnold
fonte
2
resposta incrível! funciona para bibliotecas como Angular e Vue também quando quiser um repetidor de usuário!
Matt Catellier
1
o uso de div em vez de img pode ter impacto no seo (não tenho certeza)
Muhammad Ali Mansoor
@MuhammadAliMansoor poderia se você não compensasse com microtadatas. Atualizei minha resposta para obter o mesmo resultado com tags img e ajuste de objeto, que agora tem um bom suporte.
Simon Arnold
1
Por que diabos isso não está em toda a internet? Até funciona com% larguras!
Liz
33

Posso apenas acrescentar isso se você distorcer demais suas imagens, ou seja, tirá-las de uma proporção, elas podem não parecer certas, - uma pequena quantidade está bem, mas uma maneira de fazer isso é colocar as imagens dentro de um 'contêiner' e definir o contêiner para 100 x 100, em seguida, definir sua imagem para não estourar nenhum, e definir a menor largura para a largura máxima do contêiner, isso cortará um pouco de sua imagem,

por exemplo

<h4>Products</h4>
<ul class="products">
    <li class="crop">
        <img src="ipod.jpg" alt="iPod" />
    </li>
</ul>



.crop {
 height: 300px;
 width: 400px;
 overflow: hidden;
}
.crop img {
 height: auto;
 width: 400px;
}

Dessa forma, a imagem permanecerá do tamanho de seu contêiner, mas será redimensionada sem quebrar as restrições

Andi Wilkinson
fonte
Este é meu método preferido. É mais prático do que usar fundos.
gillytech
1
Esta é definitivamente a melhor opção, minhas imagens não foram distorcidas em al.l
pwborodich
31

Maneira mais simples - Isto irá manter o tamanho da imagem como está e preencher a outra área com espaço, desta forma todas as imagens irão ocupar o mesmo espaço especificado independentemente do tamanho da imagem sem esticar

.img{
   width:100px;
   height:100px;

/*Scale down will take the necessary specified space that is 100px x 100px without stretching the image*/
    object-fit:scale-down;

}
Manoj Selvin
fonte
1
Uau, era realmente tão simples. Talvez as outras respostas sejam "corretas", mas esta foi a mais fácil de implementar.
Randall Arms Jr.
5
A única ressalva para isso é que não há suporte para o IE11.
Romuloux
A vantagem disso é que suas imagens não são cortadas nem distorcidas, mas a desvantagem é que nem todas aparecem necessariamente do mesmo tamanho. Em vez de ajuste de objeto: escala reduzida, você também pode tentar ajuste de objeto: cobertura.
Vincent
19

Você pode usar a object-fitpropriedade para dimensionar os imgelementos:

  • coveraumenta ou diminui a imagem proporcionalmente para preencher o contêiner. A imagem é cortada horizontalmente -ou- verticalmente, se necessário.
  • contain aumenta ou diminui a imagem proporcionalmente para caber dentro do contêiner.
  • scale-down reduz a imagem proporcionalmente para caber dentro do contêiner.

.example {
  margin: 1em 0;
  text-align: center;
}

.example img {
  width: 30vw;
  height: 30vw;
}

.example-cover img {
  object-fit: cover;
}

.example-contain img {
  object-fit: contain;
}
<div class="example example-cover">
  <img src="https://i.stack.imgur.com/B0EAo.png">
  <img src="https://i.stack.imgur.com/iYkNH.png">
  <img src="https://i.stack.imgur.com/gne9N.png">
</div>

<div class="example example-contain">
  <img src="https://i.stack.imgur.com/B0EAo.png">
  <img src="https://i.stack.imgur.com/iYkNH.png">
  <img src="https://i.stack.imgur.com/gne9N.png">
</div>

No exemplo acima: vermelho é paisagem, verde é retrato e azul é imagem quadrada. O padrão quadriculado consiste em quadrados de 16x16px.

Salman A
fonte
1
Isso é ótimo, exceto que não funciona para nenhuma versão do IE. caniuse.com/#feat=object-fit
Jameela Huq
3

Para quem usa Bootstrap e não quer perder a responsividade basta não definir a largura do container. O código a seguir é baseado na postagem gillytech .

index.hmtl

<div id="image_preview" class="row">  
    <div class='crop col-xs-12 col-sm-6 col-md-6 '>
         <img class="col-xs-12 col-sm-6 col-md-6" 
          id="preview0" src='img/preview_default.jpg'/>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-6">
         more stuff
    </div>

</div> <!-- end image preview -->

style.css

/*images with the same width*/
.crop {
    height: 300px;
    /*width: 400px;*/
    overflow: hidden;
}
.crop img {
    height: auto;
    width: 100%;
}

OR style.css

/*images with the same height*/
.crop {
    height: 300px;
    /*width: 400px;*/
    overflow: hidden;
}
.crop img {
    height: 100%;
    width: auto;
}
Sven Ya
fonte
3

Você pode fazer desta forma:

 .container{
position: relative;
width: 100px;
height: 100px;
overflow: hidden;
z-index: 1;
}

img{
left: 50%;
position: absolute;
top: 50%;
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
max-width: 100%;
}
Arun ks
fonte
1

Estava procurando uma solução para este mesmo problema, criar uma lista de logotipos.

Eu vim com essa solução que usa um pouco de flexbox, que funciona para nós já que não estamos preocupados com navegadores antigos.

Este exemplo assume uma caixa de 100x100px, mas tenho certeza de que o tamanho pode ser flexível / responsivo.

.img__container {
    display: flex;
    padding: 15px 12px;
    box-sizing: border-box;
    width: 100px; height: 100px;

    img {
        margin: auto;
        max-width: 100%;
        max-height: 100%;
    }
}

ps .: pode ser necessário adicionar alguns prefixos ou usar o autoprefixer.

Rafaelbiten
fonte
1

Com base na resposta de Andi Wilkinson (a segunda), melhorei um pouco, certifique-se de que o centro da imagem seja mostrado (como a resposta aceita):

HTML:

<div class="crop">
   <img src="img.png">
</div>

CSS:

.crop{
  height: 150px;
  width: 200px;
  overflow: hidden;
}
.crop img{
  width: 100%;
  height: auto;
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%); /* Ch <36, Saf 5.1+, iOS < 9.2, An =<4.4.4 */
  -ms-transform: translateY(-50%); /* IE 9 */
  transform: translateY(-50%); /* IE 10, Fx 16+, Op 12.1+ */
}
Alexee
fonte
1

Defina os parâmetros de altura e largura no arquivo CSS

.ImageStyle{

    max-height: 17vw;
    min-height: 17vw;
    max-width:17vw;
    min-width: 17vw;
    
}

Ema
fonte
1
.article-img img{ 
    height: 100%;
    width: 100%;
    position: relative;
    vertical-align: middle;
    border-style: none;
 }

Você fará as imagens com o mesmo tamanho do div e poderá usar a grade de inicialização para manipular o tamanho do div de acordo

Manav Kothari
fonte
0

O tamanho da imagem não depende da altura e largura div,

usar elemento img em css

Aqui está o código css que ajuda você

div img{
         width: 100px;
         height:100px;
 }

se você quiser definir o tamanho por div

usa isto

div {
    width:100px;
    height:100px;
    overflow:hidden;
}

por este código, sua imagem é exibida no tamanho original, mas mostra os primeiros 100x100px que o estouro irá ocultar

asad raza
fonte
0

Sem código, é difícil ajudá-lo, mas aqui estão alguns conselhos práticos para você:

Suspeito que sua "parede de imagem" tenha algum tipo de recipiente com um id ou classe para dar estilos.

por exemplo:

<body>

<div id="maincontainer">
  <div id="header"></div>

  <div id="content">
    <div id="imagewall">
      <img src"img.jpg">
<!-- code continues -->

Definir um tamanho em todas as imagens para sua parede de imagens, sem afetar outras imagens, como seu logotipo, etc., é fácil se o seu código for configurado de forma semelhante ao acima.

#imagewall img {
  width: 100px;
  height: 100px; }

Mas se suas imagens não estiverem perfeitamente quadradas, elas serão distorcidas usando este método.

1934286
fonte
0

Vá para o seu arquivo CSS e redimensione todas as suas imagens da seguinte maneira

img {
  width:  100px;
  height: 100px;
}
bakslash
fonte
simples e direto!
KiwenLau