HTML CSS
.scaleA { width: 100%; max-width: max-content; } <img src="IMG.JPG" class="scaleA"/>
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; }
<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"/>
.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; }
<div class="scaleC"> <p style="margin-bottom:1000px"> Test </p> </div>