Mała sztuczka do zmiany proporcji obrazów.
Powiedzmy, że mamy obraz o proporcjach 1:1 i chcemy zmienić go na proporcje 16:9.
Oblicz rozmiar kadrowania
Najpierw oblicz, ile rozmiaru musisz wykadrować z obrazu:
9/16= 56.25(%) /*procentowy rozmiar zdjęcia po wykadrowaniu*/
100-56.25 =43.75(%) /*wartość procentowa kadrowania */
44 / 2 = 21.875(%) /*każda strona*/
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
Teraz po prostu dodaj ujemny margines do obrazu
figure img{
/*add to other styles*/
margin:-21.875% 0;
}
LIVE DEMO
Second Method, Dodaj wysokość
Teraz pójdźmy w przeciwną stronę. Powiedzmy, że mamy obraz o proporcjach 16:9 i chcemy go zmienić na proporcje 1:1.
Oblicz dodatkowy rozmiar
- 16/9 = 1.7777 /*brak rozmiaru dla proporcji 1:1*/
- 1,777 * 100 = 177,77(%) /*rozmiar dla obrazu przed wykadrowaniem*/
- 177.77-100 = 77,77 /*dodatkowy rozmiar, który zostanie wykadrowany*/
- 77,77/2 = 38.885(%) /*dodatkowy rozmiar, który zostanie przycięty w każdym rozmiarze*/
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
To wszystko, mam nadzieję, że ci się spodoba.
Więcej postów CSS, które napisałem:
CSS Position Sticky – How It Really Works!
Nowe właściwości logiczne CSS!
Nowa ewolucja projektowania responsywnego
Architektura CSS dla wielu stron internetowych za pomocą SASS
Metody siatki CSS
Becoming a CSS Grid Ninja!
Polecane filmy CSS, kanały i listy odtwarzania
Śledź mnie na:
Mój Twitter
Moja Firma
Możesz mnie znaleźć w moich grupach facebookowych:
CSS Masters
CSS Masters Israel