Kleine truc om de verhoudingen in afbeeldingen te veranderen.
Laten we zeggen dat we een afbeelding hebben met een verhouding van 1:1 en dat we die willen veranderen in een verhouding van 16:9.
Bereken bijsnijdgrootte
Bereken eerst hoeveel grootte u van de afbeelding moet bijsnijden:
9/16= 56.25(%) /*afbeelding procent grootte na bijsnijden*/
100-56.25 =43.75(%) /*bijsnijden procent waarde */
44 / 2 = 21.875(%) /*elke kant*/
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 alleen nog negatieve marge toevoegen aan de afbeelding
figure img{
/*add to other styles*/
margin:-21.875% 0;
}
LIVE DEMO
Tweede Methode, Voeg hoogte toe
Nu gaan we de andere kant op. Laten we zeggen dat we een afbeelding hebben met een verhoudingsgetal van 16:9 en we willen dit veranderen in een verhoudingsgetal van 1:1.
Calculate Additional Size
- 16/9 = 1.7777 /*ontbrekende verhoudingsmaat voor verhouding 1:1*/
- 1.777 * 100 = 177.77(%) /*maat voor de afbeelding voor het bijsnijden*/
- 177.77-100 = 77.77 /*extra grootte die zal worden bijgesneden*/
- 77.77/2 = 38.885(%) /*extra grootte die wordt bijgesneden per grootte*/
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
Dat is alles, ik hoop dat u er plezier aan beleeft.
Meer CSS Berichten die ik geschreven heb:
CSS Position Sticky – Hoe het echt werkt!
Nieuwe CSS Logische Eigenschappen!
De Nieuwe Responsive Design Evolutie
CSS Architectuur voor Meerdere Websites Met SASS
De CSS Grid Methodes
Een CSS Grid Ninja worden!
Aanbevolen CSS video’s, kanalen en afspeellijsten
Volg mij op:
Mijn Twitter
Mijn Bedrijf
Je kunt mij vinden in mijn facebook groepen:
CSS Masters
CSS Masters Israel