HOW TO KEEP IMAGE ASPECT RATIO

[{"selector":"#anim-37db93cf-38a7-4744-b2f1-69a356300c9e","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-91b069d1-56c7-47e8-bf40-ace352f0725d","keyframes":{"transform":["translate3d(0px, -1303.39557%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-771118ad-63db-4953-bf6e-972002a18df4","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-637a399c-32a0-47d7-9205-c6c5d1061a54","keyframes":{"transform":["translate3d(-117.19298%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-96c33fb5-9095-42c2-a808-4e00f50f3476","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-3221a84f-a6fe-434d-a9a6-69f39b96b910","keyframes":{"transform":["translate3d(0px, 294.07400%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] HTML CSS (a quick guide)

AUTO DIMENSIONS

[{"selector":"#anim-36474eef-f21b-421c-9e57-775403ef5b7b","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-a0eca555-b853-4fae-8a7a-3c51dee9021c","keyframes":{"transform":["translate3d(-115.14196%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-5ee6c7e5-0b90-4766-9b50-b6992cd41ffe","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-98e46032-24fa-48ac-87bc-268be55eb0df","keyframes":{"transform":["translate3d(114.82649%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] <img src="alpaca.jpg" style=" width: 300px; height: auto; "/> <img src="alpaca.jpg" style=" width: auto; height: 300px; "/>

OBJECT FIT IMAGE

[{"selector":"#anim-3d458446-14c6-4581-86c8-a4a05945741c","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-99a3757e-5c2e-431f-87b5-185e2066b49f","keyframes":{"transform":["translate3d(115.18987%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-24e7e6d6-5aff-427c-9024-286023ce9541","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-e08adab2-d101-49f9-99aa-05335603f176","keyframes":{"transform":["translate3d(0px, 231.95519%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] FIXED IMAGE DIMENSIONS img { border: 5px solid red; width: 500px; height: 200px; } RESIZE BEHAVIOR img.contain { object-fit: contain ; } img.cover { object-fit: cover ; } img.scale { object-fit: scale-down ; } img.fill { object-fit: fill; }

PADDING TRICK

[{"selector":"#anim-ef222815-e449-4669-84a6-b686bb4af84c","keyframes":{"transform":["rotate(-540deg) scale(0.1)","none"],"opacity":[0,1]},"delay":0,"duration":1000,"fill":"both","iterations":1}] #aspect-img { width: 100%; 16:9 = 9/16 = 0.5625 = 56.25% padding-bottom: 56.25%; background: url("alpaca.jpg"); background-repeat: no-repeat; background-size: 100% auto } <div id="aspect-img"></div>

VISIT & FOLLOW

[{"selector":"#anim-c089402e-d825-46c7-bc79-bdbe526bb93a","keyframes":{"opacity":[0,1]},"delay":2000,"duration":1000,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-eb30e919-3749-432c-b677-e6e4dd75618e","keyframes":{"opacity":[0,1]},"delay":2000,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-473b7512-531b-4c4c-9341-a9759235687a","keyframes":{"transform":["translate3d(-128.43511%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":2000,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-e2fa9838-a68d-42e5-87dd-741e43d621fe","keyframes":{"opacity":[0,1]},"delay":2400,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-74fae7d5-f08a-4e4a-8e86-daa952df8a7f","keyframes":{"transform":["translate3d(-151.73267%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":2400,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-313a50b0-0c0e-4b1b-804f-a63ff2fd4cdb","keyframes":{"opacity":[0,1]},"delay":2600,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-9220a1b0-67cb-4c43-a1b9-76baf9fd137e","keyframes":{"transform":["translate3d(-151.23154%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":2600,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-11bd4a3f-6ec7-41d9-a2d7-ed120cfc2454","keyframes":{"opacity":[0,1]},"delay":2200,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-2396b69a-184f-4e0d-a3fc-0ad87408cfba","keyframes":{"transform":["translate3d(-171.47058%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":2200,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-67581488-f970-42bc-9385-515ddd1f365b [data-leaf-element=\"true\"]","keyframes":{"transform":["translate(20.250939014149093%, 0%) scale(1.5)","translate(0%, 0%) scale(1)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}]

HOW TO KEEP IMAGE ASPECT RATIO

AUTO DIMENSIONS

01

OBJECT FIT IMAGE

02

PADDING TRICK

03

VISIT & FOLLOW

CODE BOXX YOUTUBE

CODE BOXX PINTEREST

FULL TUTORIAL