HTML CSS

AUTO RESIZING IMAGES IN HTML CSS

(a quick guide)

100% WIDTH WILL AUTO SCALE TO FIT .scaleA {   width: 100%;   max-width: max-content; }

SIMPLE IMAGE AUTO RESIZE

01

THE HTML <"IMG.JPG" class="scaleA">

DESIRED FIXED DIMENSION .scaleB { width: 200px; height: 200px; }

RESIZE IMAGE TO FIT

02

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

03

.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>