Kis trükk a képek arányméretének megváltoztatásához.
Tegyük fel, hogy van egy 1:1 arányú képünk, és szeretnénk 16:9 arányméretre változtatni.
Calculate Cropping Size
Először is számítsuk ki, hogy mekkora méretű képet kell kivágnunk a képből:
9/16= 56.25(%) /*kép százalékos mérete a képkivágás után*/
100-56,25 =43,75(%) /*kivágás százalékos értéke */
44 / 2 = 21.875(%) /*minden oldal*/
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*/
}
Add Cropping Styles
Most csak negatív margót adunk a képhez
figure img{
/*add to other styles*/
margin:-21.875% 0;
}
LIVE DEMO
Második módszer, Magasság hozzáadása
Most menjünk az ellenkező irányba. Tegyük fel, hogy van egy 16:9 arányú képünk, és azt szeretnénk 1:1 arányú méretre módosítani.
Calculate Additional Size
- 16/9 = 1.7777 /*hiányzó méret az 1:1 arányhoz*/
- 1.777 * 100 = 177.77(%) /*a kép mérete a vágás előtt*/
- 177.77-100 = 77,77 /*kiegészítő méret, amely a képkivágásra kerül*/
- 77,77/2 = 38.885(%) /*kiegészítő méret, ami méretenként lesz levágva*/
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*/
}
Add Cropping Styles
figure img{
/*add to other styles*/
margin:0 -38.885%;
width:177.777%;
}
LIVE DEMO
Ez minden, remélem tetszik.
Még több CSS hozzászólást írtam:
CSS Position Sticky – Hogyan működik valójában!
Új CSS logikai tulajdonságok!
Az új Responsive Design evolúciója
CSS architektúra több weboldalhoz SASS-szel
A CSS rácsos módszerek
Becoming a CSS Grid Ninja!
Javasolt CSS videók, csatornák és lejátszási listák
Kövess engem:
Twitterem
Cégem
Megtalálsz a facebook csoportjaimban:
CSS Masters
CSS Masters Israel