AUTO RESIZING IMAGES IN HTML CSS

[{"selector":"#anim-376857f6-e94f-4241-ba5c-97082fe18695","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-da68a01e-198d-41f9-bd8b-09c05405a94c","keyframes":{"transform":["rotate(-360deg) translate3d(0px, 219.37017%, 0) rotate(360deg)","rotate(-360deg) translate3d(0px, 0px, 0) rotate(360deg)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-04b581ba-ee07-4440-819d-58d1216430d0","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-479f8501-1860-42f0-8874-40efe73965ce","keyframes":{"transform":["translate3d(0px, -803.3954%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] HTML CSS

SIMPLE IMAGE AUTO RESIZE

[{"selector":"#anim-6f4b1697-e431-46a7-833e-a071bb6cf752","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-7df7c1ae-46f1-46b1-9754-046a7d48bc7b","keyframes":{"transform":["translate3d(-114.77988%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] .scaleA { width: 100%; max-width: max-content; } <img src="IMG.JPG" class="scaleA"/>

RESIZE IMAGE TO FIT (A)

[{"selector":"#anim-54a2753d-bf4f-4cc9-8476-79413e3f0d0c","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-75565fad-de62-4b5b-a4db-27a8c49e1315","keyframes":{"transform":["translate3d(114.77986%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] DESIRED FIXED DIMENSION .scaleB { width: 200px; height: 200px; } RESIZE METHODS .fitFill { object-fit: fill; } .fitContain { object-fit: contain; } .fitCover { object-fit: cover; } .fitScale { object-fit: scale-down; }

RESIZE IMAGE TO FIT (B)

[{"selector":"#anim-f914f66f-d293-444e-ad80-29d106305b0f","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-42f90ad2-2e77-4497-8e70-ddd2a05fe356","keyframes":{"transform":["translate3d(0px, 192.92931%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] <img src="IMG.JPG" class="scaleB fitFill"/> <img src="IMG.JPG" class="scaleB fitContain"/> <img src="IMG.JPG" class="scaleB fitCover"/> <img src="IMG.JPG" class="scaleB fitScale"/>

RESIZE BACKGROUND (A)

[{"selector":"#anim-cda4da48-5dcc-433e-9184-7b5d3ed3c42b","keyframes":{"transform":["translate3d(-115.14196%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-ff0d81d0-a383-4027-ae65-a4f41e248f1b","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-a5d651ea-dbe3-4168-97b1-030844c02f5a","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] .scaleC { FIXED DIMENSION width: 100%; height: 300px; overflow: auto; BACKGROUND IMAGE background-image: url(IMG.JPG); background-position: center; background-size: cover; background-repeat: no-repeat; background-attachment: scroll; }

RESIZE BACKGROUND (B)

[{"selector":"#anim-4f207353-f9bb-4bdc-96c2-c04aa00d0b85","keyframes":{"transform":["translate3d(114.82649%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-aec2bda7-6257-4a58-9100-336b7b912ea8","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-cd3cc383-2c3d-4460-9e97-85e611841f6f","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] <div class="scaleC"> <p style="margin-bottom:1000px"> Test </p> </div>

FULL TUTORIAL

[{"selector":"#anim-e6317bf9-ff5a-4ffa-a8b2-fad9e904c7fa","keyframes":[{"transform":"scale(1)","offset":0},{"transform":"scale(1.5)","offset":0.33},{"transform":"scale(0.95)","offset":0.66},{"transform":"scale(1)","offset":1}],"delay":0,"duration":1450,"easing":"ease-in-out","fill":"both","iterations":1}] [{"selector":"#anim-775753de-5ecc-4e7a-a2fd-706daa4fe02f","keyframes":[{"transform":"scale(1)","offset":0},{"transform":"scale(1.5)","offset":0.33},{"transform":"scale(0.95)","offset":0.66},{"transform":"scale(1)","offset":1}],"delay":0,"duration":1450,"easing":"ease-in-out","fill":"both","iterations":1}] [{"selector":"#anim-20d7cea6-1c69-43f0-81b9-ecf94e32ddb9","keyframes":[{"transform":"scale(1)","offset":0},{"transform":"scale(1.5)","offset":0.33},{"transform":"scale(0.95)","offset":0.66},{"transform":"scale(1)","offset":1}],"delay":0,"duration":1450,"easing":"ease-in-out","fill":"both","iterations":1}]