HOW TO KEEP IMAGE ASPECT RATIO IN HTML CSS

[{"selector":"#anim-5f8f3194-a4af-4a6f-9983-e7bfb143e33d","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-b81ad0d4-74d5-4e27-9564-7eabcfd409c6","keyframes":{"transform":["translate3d(0px, -697.83975%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-c1043d54-389f-4cdb-9536-ec2072350edd","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-40e1ffa7-4025-4bd1-b4bc-4d5c9dd5306d","keyframes":{"transform":["translate3d(-116.84211%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] HTML CSS

AUTO DIMENSIONS

[{"selector":"#anim-43c8b2d5-f92a-489c-8d12-081a0ca804a4","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-63649d6e-52f0-4667-a93c-af21c1d1de37","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-6123ef2e-37bb-4804-b946-4faa53434b12","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-036234d4-3045-4915-a75d-cf4ede05403f","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; "/> 01 <img src="alpaca.jpg" style=" width: auto; height: 300px; "/>

OBJECT FIT IMAGE

[{"selector":"#anim-65337de5-5ebc-4fd5-9300-8e088181ba0f","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-1c77ef04-033b-4b95-84fc-df05f1ebd637","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-0a4e79f9-f7ed-4ca6-a468-f24dd4357872","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-063142fe-aaaf-443c-b79b-57e53bd2b63b","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; } 02 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-8effbd42-1423-40fc-acfa-908b0193bb76","keyframes":[{"transform":"rotate(-540deg) scale(0.1)","opacity":0},{"transform":"none","opacity":1}],"delay":0,"duration":1000,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","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> 03

FULL TUTORIAL

[{"selector":"#anim-eed7705c-48f1-439f-97c5-6e889ca5df30","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-4d1d452f-19a3-4165-ba98-60e64ce22c5c","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-cc995df5-0bf0-4802-8ea1-e31fc32fbdd9","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}]

HOW TO KEEP IMAGE ASPECT RATIO IN HTML CSS

AUTO DIMENSIONS

OBJECT FIT IMAGE

PADDING TRICK

FULL TUTORIAL

VISIT & FOLLOW

CODE BOXX YOUTUBE

CODE BOXX PINTEREST