HTML CSS

AUTO RESIZING IMAGES IN HTML CSS

.scaleA {   width: 100%;   max-width: max-content; } <img src="IMG.JPG" class="scaleA"/>

SIMPLE IMAGE AUTO RESIZE

01

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 (A)

02

RESIZE IMAGE TO FIT (B)

03

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

04

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

05

<div class="scaleC">   <p style="margin-bottom:1000px">     Test   </p>  </div>