images

density responsiveness at 900px

                
                <img srcset='../../assets/img.jpg 500w,
                ../../assets/img2.jpg 200w' sizes="(min-width: 900px) 500px,
                200px" alt='Hairy cow' class='img-fit-cover' />
                
            

dimension responsiveness

                
                <img src='../../assets/img.jpg' alt='Hairy cow' class='img-md img-fit-cover' />
                
            

round image

                
                <img src='../../assets/img.jpg' alt='Hairy cow' class='img-s brd-full img-fit-cover' />
                
            

image css

                
                /* image fit  */

                .img-fit-cover {
                    object-fit: cover;
                }
                    
                .img-fit-contain {
                    object-fit: contain;
                }
                    
                /* image dimensions */
                    
                .img-xs {
                    width: 8rem;
                }
                    
                .img-s {
                    width: 15rem;
                }
                    
                .img-md {
                    width: 20rem;
                }
                    
                .img-lg {
                    width: 25rem;
                }
                    
                .img-xlg {
                    width: 30rem;
                }