Dimensionar automaticamente a imagem na disposição da FlexBox CSS e manter as proporções?
usei a disposição da caixa de flexões CSS que aparece como se mostra abaixo:
Se o ecrã ficar mais pequeno, torna-se nisto:o problema é que as imagens não são redimensionadas mantendo a proporção de aspecto da imagem original.
é possível usar o CSS puro e o layout flex box para deixar as imagens serem redimensionadas se a tela ficar menor?
Aqui está o meu html:
<div class="content">
<div class="row">
<div class="cell">
<img src="http://i.imgur.com/OUla6mK.jpg"/>
</div>
<div class="cell">
<img src="http://i.imgur.com/M16WzMd.jpg"/>
</div>
</div>
</div>
a minha CSS:
.content {
background-color: yellow;
}
.row {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
box-orient: horizontal;
flex-direction: row;
-webkit-box-pack: center;
-moz-box-pack: center;
box-pack: center;
justify-content: center;
-webkit-box-align: center;
-moz-box-align: center;
box-align: center;
align-items: center;
background-color: red;
}
.cell {
-webkit-box-flex: 1;
-moz-box-flex: 1;
box-flex: 1;
-webkit-flex: 1 1 auto;
flex: 1 1 auto;
padding: 10px;
margin: 10px;
background-color: green;
border: 1px solid red;
text-align: center;
}
7 answers
img {max-width:100%;}
é uma maneira de fazer isto. Basta adicioná-lo ao seu código CSS.
align-items: center
iria resolver isso para mim. Ao ler os documentos, faz sentido sobrepor isto se estiver a flexionar as imagens directamente, dado que align-items: stretch
é o valor por omissão. Outra solução é embrulhar suas imagens com um div primeiro.
.myFlexedImage {
display: flex;
flex-flow: row nowrap;
align-items: center;
}
É melhor experimentar a nova e simples funcionalidade CSS3:
img {
object-fit: contain;
}
Ele preserva a proporção de imagem (como quando você usa o truque de imagem de fundo), e no meu caso funcionou bem para o mesmo problema.
Tenha cuidado, porém, não é suportado pelo IE (veja os detalhes do suporte aqui).
Sugiro que se investigue as opções {[[0]} para ajustar o tamanho da imagem.
Em vez de ter a imagem na página se a tiver definida como uma imagem de fundo, poderá definir:
background-size: contain
Ou
background-size: cover
Estas opções têm em conta tanto a altura como a largura ao dimensionar a imagem. Isto vai funcionar na IE9 e em todos os outros navegadores recentes.
Na segunda imagem, parece que quer que a imagem preencha a caixa, mas o exemplo que criou mantém a proporção de aspecto (os animais parecem normais, não magros ou gordos).
Eu Não tenho nenhuma pista se você photoshopou essas imagens como exemplo ou o segundo é "como deve ser" também (você disse É, enquanto o primeiro exemplo que você disse "deve")
De qualquer forma, tenho de assumir:Se "as imagens não forem dimensionadas mantendo a proporção de aspecto" e você me mostrar uma imagem que faz mantenha a proporção de aspecto dos pixels, eu tenho que assumir que você está tentando realizar a proporção de aspecto da área "croping" (o interior do verde) WILE mantendo a proporção de aspecto dos pixels. Ou seja, você quer encher a célula com a imagem, ampliando e cortando a imagem.
Se esse é o seu problema, o código que forneceu não reflecte "o seu problema", mas o seu exemplo inicial.
Dadas as duas suposições anteriores, o que você precisa não pode ser realizado com imagens reais se a altura da caixa é dinâmica, mas com imagens de fundo. Ou usando "Tamanho de fundo: conter" ou estas técnicas (paddings inteligentes em percentagens que limitam o corte ou tamanhos máximos em qualquer lugar que você quiser): http://fofwebdesign.co.uk/template/_testing/scale-img/scale-img.htm
A única maneira de isto ser possível com imagens é se esquecermos a tua segunda imagem, e as células tiverem uma altura fixa, e felizmente, a julgar pelas tuas imagens de amostra, a altura permanece a mesma!
Então, se a altura do seu contentor não mudar, e quiser manter as suas imagens quadradas, basta definir a altura máxima das imagens para esse valor conhecido (menos as placas ou contornos, dependendo da propriedade de box-dimensionamento das células)
Assim:<div class="content">
<div class="row">
<div class="cell">
<img src="http://lorempixel.com/output/people-q-c-320-320-2.jpg"/>
</div>
<div class="cell">
<img src="http://lorempixel.com/output/people-q-c-320-320-7.jpg"/>
</div>
</div>
</div>
E o CSS:
.content {
background-color: green;
}
.row {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
box-orient: horizontal;
flex-direction: row;
-webkit-box-pack: center;
-moz-box-pack: center;
box-pack: center;
justify-content: center;
-webkit-box-align: center;
-moz-box-align: center;
box-align: center;
align-items: center;
}
.cell {
-webkit-box-flex: 1;
-moz-box-flex: 1;
box-flex: 1;
-webkit-flex: 1 1 auto;
flex: 1 1 auto;
padding: 10px;
border: solid 10px red;
text-align: center;
height: 300px;
display: flex;
align-items: center;
box-sizing: content-box;
}
img {
margin: auto;
width: 100%;
max-width: 300px;
max-height:100%
}
O seu código é inválido (as marcas de abertura são em vez de as fechar, por isso eles produzem células aninhadas, não irmãos, ele usou um Imagem de suas imagens dentro do código defeituoso, e a caixa de flexão não está segurando as células, mas ambos os exemplos em uma coluna (você configurar "linha", mas o código corrupto nidificando uma célula dentro da outra resultou em um flex dentro de uma flex, finalmente trabalhando como colunas. Não faço ideia do que querias alcançar, e como inventaste esse código, mas acho que o que queres é isto.
Eu adicionei display: flex às células também, para que a imagem fique centrada (eu acho que display: table
poderia ter sido usado aqui assim como com toda esta marcação)
HTML:
<div class="container">
<div class="box">
<img src="http://lorempixel.com/1600/1200/" alt="">
</div>
</div>
CSS:
.container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: stretch;
width: 100%;
height: 100%;
border-radius: 4px;
background-color: hsl(0, 0%, 96%);
}
.box {
border-radius: 4px;
display: flex;
}
.box img {
width: 100%;
object-fit: contain;
border-radius: 4px;
}
Estou a usar jquery ou vw para manter o rácio
Jquery
function setSize() {
var $h = $('.cell').width();
$('.your-img-class').height($h);
}
$(setSize);
$( window ).resize(setSize);
Vw
.cell{
width:30vw;
height:30vw;
}
.cell img{
width:100%;
height:100%;
}