Alai

Beregne beskæringsstørrelse

Først skal du beregne, hvor meget størrelse du skal beskære af billedet:

9/16= 56.25(%) /*billedets procentvise størrelse efter beskæring*/

100-56,25 =43,75(%) /*beskæringsprocentværdi */

44 / 2 = 21.875(%) /*hver side*//

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 skal du blot tilføje negativ margin til billedet

figure img{
/*add to other styles*/
margin:-21.875% 0;
}

LIVE DEMO

Second Method, Tilføj højde

Nu Lad os gå den modsatte vej. Lad os sige, at vi har et billede med en forholdsstørrelse på 16:9, og vi vil ændre det til en forholdsstørrelse på 1:1.

Beregn yderligere størrelse

• 16/9 = 1.7777 /*manglende forholdsstørrelse for forholdet 1:1*/
• 1.777 * 100 = 177.77(%) /*størrelse for billedet før beskæring*/
• 177.77-100 = 77,77 /*tillægsstørrelse, der skal beskæres*/
• 77,77/2 = 38.885(%) /*tillægsstørrelse, der beskæres for hver størrelse*//

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 er alt, jeg håber, du nyder det.

Mere CSS-indlæg, jeg har skrevet:
CSS Position Sticky – hvordan det virkelig virker!
Nye logiske CSS-egenskaber!
Den nye responsive designudvikling
CSS-arkitektur til flere websteder med SASS
CSS-gridmetoderne
Bliv en CSS-grid-ninja!
Anbefalede CSS-videoer, kanaler og afspilningslister

Følg mig på:
Min Twitter
Min virksomhed

Du kan finde mig i mine facebook-grupper:
CSS Masters
CSS Masters Israel