Små knep för att ändra bildförhållandet.
Säg att vi har en bild med förhållandet 1:1 och att vi vill ändra det till förhållandet 16:9.
Beräkna beskärningsstorlek
Beräkna först hur stor storlek du behöver beskära från bilden:
9/16= 56.25(%) /*bildens procentuella storlek efter beskärning*/
100-56,25 =43,75(%) /*beskärningens procentuella värde */
44 / 2 = 21.875(%) /*vardera sidan*/
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
Nu behöver du bara lägga till en negativ marginal till bilden
figure img{
/*add to other styles*/
margin:-21.875% 0;
}
LIVANDE DEMO
Second Method, Lägg till höjd
Nu går vi åt motsatt håll. Låt oss säga att vi har en bild med förhållandet storlek 16:9 och vi vill ändra den till förhållandet storlek 1:1.
Beräkna ytterligare storlek
- 16/9 = 1.7777 /*missing ratio size for ratio 1:1*/
- 1.777 * 100 = 177.77(%) /*size for the image before cropping*/
- 177.77-100 = 77,77 /*tilläggsstorlek som ska beskäras*/
- 77,77/2 = 38.885(%) /*tilläggsstorlek som kommer att beskäras för varje storlek*/
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
Det var allt, jag hoppas att du tycker om det.
Mer CSS-inlägg som jag skrivit:
CSS Position Sticky – Hur det verkligen fungerar!
Nya logiska egenskaper för CSS!
Den nya utvecklingen av responsiv design
CSS-arkitektur för flera webbplatser med SASS
Metoderna för CSS-grid
Var en CSS-grid-ninja!
Rekommenderade CSS-videor, kanaler och spellistor
Följ mig på:
Min Twitter
Mitt företag
Du kan hitta mig i mina facebook-grupper:
CSS Masters
CSS Masters Israel