AUTO RESIZING IMAGES IN HTML CSS

[{"selector":"#anim-d48a13bd-c0b7-4e0f-8e73-3cd67103ba48","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-2c158156-108d-4ae5-87df-833c0d90e77a","keyframes":{"transform":["rotate(-360deg) translate3d(0px, 139.15628%, 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-c5e14e33-c4b1-4b8a-af83-6d585836df31","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-90586fe3-92ce-4288-be74-9a68eae6beca","keyframes":{"transform":["translate3d(0px, -1311.72896%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-148af3c3-097d-47a5-a567-35655f590e2a","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-d7d2eb59-a04f-44a6-8675-34127191db96","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)

SIMPLE IMAGE AUTO RESIZE

[{"selector":"#anim-0a3ae30c-bd48-4775-a4c5-00eddc7a503c","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-cffd6c78-f927-4784-9277-59b49ba738e2","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-b8d78aeb-76d8-40c4-af67-9cca7326efea","keyframes":{"opacity":[0,1]},"delay":100,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-a67412a4-1394-46dc-87d4-af1f01b56acf","keyframes":{"transform":["translate3d(-115.18988%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":100,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] 100% WIDTH WILL AUTO SCALE TO FIT .scaleA { width: 100%; max-width: max-content; } THE HTML <"IMG.JPG" class="scaleA">

RESIZE IMAGE TO FIT

[{"selector":"#anim-6f061370-0549-46f1-b989-28d5cabe730c","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-b808a144-8404-4ba9-972b-607f074c0bbe","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"}] [{"selector":"#anim-206dd6fd-fe42-416d-97b3-653397510247","keyframes":{"opacity":[0,1]},"delay":100,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-5388cfa1-dbe9-4b77-bb3f-c16900c521b8","keyframes":{"transform":["translate3d(115.09433%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":100,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-1e592913-90cb-4630-913e-06a7bd23d87b","keyframes":{"opacity":[0,1]},"delay":200,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-114ed07a-05de-4178-a6f5-38c2c2180bd9","keyframes":{"transform":["translate3d(115.14195%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":200,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] DESIRED FIXED DIMENSION .scaleB { width: 200px; height: 200px; } RESIZE METHODS .fil { object-fit: fill; } .con { object-fit: contain; } .cov { object-fit: cover; } .sca { object-fit: scale-down; } THE HTML <img src="IMG.JPG" class="scaleB fil"> <img src="IMG.JPG" class="scaleB con"> <img src="IMG.JPG" class="scaleB cov"> <img src="IMG.JPG" class="scaleB sca">

RESIZE BACKGROUND

[{"selector":"#anim-949a9d09-3139-4190-83ed-d5d970ade764","keyframes":{"transform":["translate3d(-115.18988%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-aea2c57f-60fb-4ff7-ab58-dea2406418e4","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-318bbd8d-5d4b-4e20-b067-240356a98163","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] [{"selector":"#anim-676466c4-81b5-44ca-9786-545b920b8be2","keyframes":{"transform":["translate3d(115.45741%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-106e44e9-8919-4ff2-ab72-981d38bb47c9","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-26b69c67-3054-4fae-a9f2-27d07d8c9973","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; } THE HTML <div class="scaleC"> <p style="margin-bottom:999px">FOO</p> </div>

VISIT & FOLLOW

[{"selector":"#anim-398c9c49-7727-4928-9079-0ddfc34c8531","keyframes":{"opacity":[0,1]},"delay":2000,"duration":1000,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-3b4f3348-f2cc-43c0-8d2b-18e82180b014","keyframes":{"opacity":[0,1]},"delay":2000,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-08736743-825e-44cf-a4c4-5a70dc82e049","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-c2460456-1f5f-471d-a72e-4c6a07a5715a","keyframes":{"opacity":[0,1]},"delay":2400,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-98d0bbc9-2299-41b4-8a1d-a6df80d9894a","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-980dd484-dc10-47d6-9390-eb7232897d45","keyframes":{"opacity":[0,1]},"delay":2600,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-b9c55de3-9d17-4a26-a04a-0302df8f862c","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-df47c613-dc39-413c-a0c4-004e3c0f1d1a","keyframes":{"opacity":[0,1]},"delay":2200,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-9e6ccb07-35f5-4771-91d9-5209aa90f4b6","keyframes":{"transform":["translate3d(-170.88234%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":2200,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-db20fac9-42ba-4425-8f7d-7f0f110c7125 [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"}]

AUTO RESIZING IMAGES IN HTML CSS

SIMPLE IMAGE AUTO RESIZE

01

RESIZE IMAGE TO FIT

02

RESIZE BACKGROUND

03

VISIT & FOLLOW

CODE BOXX YOUTUBE

CODE BOXX PINTEREST

FULL TUTORIAL