Pieni temppu kuvien suhdekoon muuttamiseen.
Esitettäköön, että meillä on kuva, jonka suhdekoko on 1:1, ja haluamme muuttaa sen 16:9-suhteeseen.
Calculate Cropping Size
Laskekaa ensin, kuinka paljon kuvaa pitää leikata:
9/16= 56.25(%) /*kuvan prosentuaalinen koko rajauksen jälkeen*/
100-56,25 =43,75(%) /*rajausprosenttiarvo */
44 / 2 = 21.875(%) /*kummallakin puolella*/
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
Nyt lisätään vain negatiivinen marginaali kuvaan
figure img{
/*add to other styles*/
margin:-21.875% 0;
}
LIVE DEMO
Kakkosmenetelmä, Lisää korkeus
Mennään nyt päinvastaiseen suuntaan. Oletetaan, että meillä on kuva, jonka kuvasuhdekoko on 16:9, ja haluamme muuttaa sen kuvasuhdekokoon 1:1.
Lasketaan lisäkoko
- 16/9 = 1.7777 /*puuttuva suhdekoko suhdetta 1:1 varten*/
- 1.777 * 100 = 177.77(%) /*kuvan koko ennen rajausta*/
- 177.77-100 = 77.77 /*lisäkoko, joka rajataan*/
- 77.77/2 = 38.885(%) /*lisäkoko, joka rajataan kussakin koossa*/
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
Ei muuta, toivottavasti nautitte.
Lisää kirjoittamiani CSS-postauksia:
CSS Position Sticky – Miten se todella toimii!
Uudet CSS:n loogiset ominaisuudet!
Uusi responsiivisen muotoilun evoluutio
CSS-arkkitehtuuri useille sivustoille SASS:llä
CSS-ristikkomenetelmät
Becoming a CSS Grid Ninja!
Suositeltavat CSS-videot, -kanavat ja -soittolistat
Seuraa minua:
Twitterissäni
Yhtiössäni
Minut löydät facebook-ryhmistäni:
CSS Masters
CSS Masters Israel