Un mic truc pentru a schimba dimensiunea raportului imaginilor.
Să spunem că avem o imagine cu dimensiunea raportului de 1:1 și dorim să o schimbăm la dimensiunea raportului de 16:9.
Calculează dimensiunea de decupare
Primul calculați cât de mare este dimensiunea pe care trebuie să o decuplați din imagine:
9/16= 56.25(%) /*dimensiunea procentuală a imaginii după decupare*/
100-56.25 =43.75(%) /*valoarea procentuală a decupării */
44 / 2 = 21.875(%) /*câte o parte*/
Bază 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*/
}
Adaugați stiluri de decupare
Acum doar adăugați o marjă negativă la imagine
figure img{
/*add to other styles*/
margin:-21.875% 0;
}
LIVE DEMO
Secunda metodă, Adaugă înălțime
Acum să mergem în sens invers. Să spunem că avem o imagine cu dimensiunea raportului de 16:9 și dorim să o schimbăm la dimensiunea raportului de 1:1.
Calculate Additional Size
- 16/9 = 1.7777 /*dimensiunea raportului lipsă pentru raportul 1:1*/
- 1,777 * 100 = 177,77(%) /*dimensiunea pentru imaginea înainte de decupare*/
- 177.77-100 = 77.77 /*dimensiunea suplimentară care va fi decupată*/
- 77.77/2 = 38.885(%) /*dimensiunea suplimentară care va fi decupată la fiecare dimensiune*/
Bază 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*/
}
Adaugați stiluri de decupare
figure img{
/*add to other styles*/
margin:0 -38.885%;
width:177.777%;
}
LIVE DEMO
Asta e tot, sper să vă placă.
Mai multe postări CSS pe care le-am scris:
CSS Position Sticky – Cum funcționează cu adevărat!
Noile proprietăți logice CSS!
Noua evoluție Responsive Design
Arhitectura CSS pentru mai multe site-uri web cu SASS
Metodele CSS Grid
Deveniți un Ninja CSS Grid!
Recomandăm videoclipuri, canale și playlisturi CSS recomandate
Să mă urmăriți pe:
Twitter-ul meu
Compania mea
Puteți să mă găsiți în grupurile mele de facebook:
CSS Masters
CSS Masters Israel
.