Malý trik pro změnu velikosti poměru obrázků.
Řekněme, že máme obrázek s poměrem 1:1 a chceme ho změnit na poměr 16:9.
Vypočítejte velikost ořezu
Nejprve spočítejte, jak velkou velikost potřebujete z obrázku oříznout:
9/16= 56.
Vypočítejte velikost oříznutého obrázku.25(%) /*procentní velikost obrázku po oříznutí*/
100-56,25 =43,75(%) /*procentní hodnota oříznutí */
44 / 2 = 21.875(%) /*každá strana*/
Základní 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*/
}
Přidání ořezových stylů
Nyní stačí přidat obrázku záporný okraj
figure img{
/*add to other styles*/
margin:-21.875% 0;
}
Živé demo
Druhá metoda, Přidat výšku
Nyní půjdeme opačným způsobem. Řekněme, že máme obrázek s velikostí poměru 16:9 a chceme jej změnit na velikost poměru 1:1.
Vypočítat další velikost
- 16/9=1.7777 /*poměrná velikost pro poměr 1:1*/
- 1,777 * 100 = 177,77(%) /*velikost pro obrázek před oříznutím*/
- 177.77-100 = 77,77 /*další velikost, která bude oříznuta*/
- 77,77/2 = 38.885(%) /*další velikost, která bude oříznuta při každé velikosti*/
Základní 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*/
}
Přidat ořezové styly
figure img{
/*add to other styles*/
margin:0 -38.885%;
width:177.777%;
}
Živé demo
To je vše, doufám, že se vám bude líbit.
Další příspěvky o CSS, které jsem napsal:
Poziční lepení CSS – jak to skutečně funguje!
Nové logické vlastnosti CSS!
Nová evoluce responzivního designu
Architektura CSS pro více webů pomocí SASS
Metody mřížky CSS
Stát se nindžou mřížky CSS!
Doporučená CSS videa, kanály a playlisty
Sledujte mě na:
Můj Twitter
Moje společnost
Můžete mě najít v mých facebookových skupinách:
CSS Masters
CSS Masters Israel