HTML CSS
(a quick guide)
100% WIDTH WILL AUTO SCALE TO FIT .scaleA { width: 100%; max-width: max-content; }
THE HTML <"IMG.JPG" class="scaleA">
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">
.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>