HOW TO KEEP IMAGE ASPECT RATIO

[{"selector":"#anim-e69dd02e-95b9-45a1-a298-ac365f3f31c5","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-33891404-7cc4-45e9-97d4-f22b801a1b45","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-c8831628-ffe8-4d9b-a239-7f6f40c1de51","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-abf64ec7-f335-484f-9b97-a3b52fc43422","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-7200850b-f574-427d-a19a-d242db9804e1","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-417255f0-e694-4b3d-bc8b-3a58425290e9","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-3c13a420-86da-4dc3-87d7-acff7c1e0b22","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-a7cd5f30-5106-4d6e-a14d-ccddde980cc4","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-b1f04dc0-f311-433a-8ff6-cc9041ef2e1a","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-521cf4ae-b6d9-43ec-8b57-725e8a190dce","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-8f3827a1-b7e1-4b54-9081-07cb7220c58f","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-8bac56db-5b66-4a36-b44f-a216f06c36e9","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-e69caeae-f4c5-4d3a-b22c-42db655bd7c2","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-7c819246-55bf-4fd2-801d-1bff2e1c5cca","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-1e0ef2ea-21c6-4829-baed-0aae9a5663d3","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-41e023f9-f335-4cc6-a3e0-7ac8a063089f","keyframes":{"opacity":[0,1]},"delay":2000,"duration":1000,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-8995d4f0-9dbb-4b8f-84eb-dc2a17c5bd86","keyframes":{"opacity":[0,1]},"delay":2000,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-d165dd3d-9365-4c65-b8a7-da79a9dcd55b","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-2b983ced-4d9b-4751-bbdc-c4e0a59290c6","keyframes":{"opacity":[0,1]},"delay":2400,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-ca9c7007-2d0a-4e74-80ca-cf59fa96eb96","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-6705944f-ab35-49fb-ae43-4867790f0d9a","keyframes":{"opacity":[0,1]},"delay":2600,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-b47c7631-b293-40b4-a466-c4bd8eb99319","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-28bdfcd9-7714-4a46-bcf6-cbe51fdd4857","keyframes":{"opacity":[0,1]},"delay":2200,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-a4fe59cd-1ad2-4d5e-bfbb-373bedbabe66","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-aebdeb28-4ebe-4b25-baf2-73793e95ae8b [data-leaf-element=\"true\"]","keyframes":{"transform":["translate(-4.665192251743079%, 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