Truque pequeno para mudar o tamanho da proporção das imagens.
Vamos dizer que temos imagem com proporção de 1:1 e queremos mudá-la para proporção de 16:9.
Calcular tamanho do cultivo
Calcule primeiro o tamanho que você precisa para cultivar a partir da imagem:
9/16= 56.25(%) /* tamanho percentual da imagem após o corte*/
100-56,25 =43,75(%) /* valor percentual de corte */
44 / 2 = 21.875(%) /*cada lado*/
Base HTML& CSS
HTML
<figure>
<img src="image-name.jpg">
</figure>
CSS
figure{
width:300px; /*container-width*/
overflow:hidden; /*hide bounds of image */
margin:0; /*reset margin of figure tag*/
}
figure img{
display:block; /*remove inline-block spaces*/
width:100%; /*make image streatch*/
}
Adicionar Estilos de Corte
Agora basta adicionar margem negativa à imagem
figure img{
/*add to other styles*/
margin:-21.875% 0;
}
Demonstração AO VIVO
Segundo Método, Adicione Altura
Agora Vamos pelo caminho oposto. Digamos que temos imagem com tamanho de proporção de 16:9 e queremos mudá-la para tamanho de proporção de 1:1.
>
>
>
Calcular Tamanho Adicional
- 16/9 = 1.7777 /*tamanho da relação 1:1*/
- 1,777 * 100 = 177,77(%) /*tamanho para a imagem antes do corte*/
- 177.77-100 = 77,77 /*tamanho adicional que será cortado*/
- 77,77/2 = 38.885(%) /*tamanho adicional que será cortado em cada tamanho*/
Base HTML & CSS
HTML
<figure>
<img src="image-name2.jpg">
</figure>
CSS
figure{
width:300px; /*container-width*/
overflow: hidden; /*hide bounds of image */
margin:0; /*reset margin of figure tag*/
}
figure img{
display:block; /*remove inline-block spaces*/
}
Adicionar Estilos de Corte
figure img{
/*add to other styles*/
margin:0 -38.885%;
width:177.777%;
}
DEMO AO VIVO
É tudo, espero que gostem.
>
Mais Posts CSS Eu Escrevi:
CSS Position Sticky – How It Really Works!
New CSS Logical Properties!
The New Responsive Design Evolution
CSS Architecture for Multiple Websites With SASS
The CSS Grid Methods
Becoming a CSS Grid Ninja!
Vídeos, Canais e Playlists CSS recomendados
Siga-me em:
Meu Twitter
Minha Companhia
Você pode me encontrar em meus grupos de facebook:
Mestres CSS
Mestres CSS Israel