Image Resizing in html and css

Question

Guys i am learning web development and having problem in making image responsive. Can you please tell me what i should change here

HTML code

<div class="carousel-item active" style="background: url(assets/img/slide/slide-1.jpg);">

CSS

#hero {
       width: 100%;
       height: 100vh;
        background-color: rgba(39, 37, 34, 0.8);
       overflow: hidden;
       padding: 0;
      }
#hero .carousel-item {
       width: 100%;
       height: 100vh;
       background-size: cover;
       background-position: center;
       background-repeat: no-repeat;
      }
#hero .carousel-item::before {
       content: "";
       background-color: rgba(12, 11, 10, 0.5);
       position: absolute;
       top: 0;
       right: 0;
       left: 0;
       bottom: 0;
     }
#hero .carousel-container {
       display: flex;
       justify-content: center;
       align-items: center;
       position: absolute;
       bottom: 0;
       top: 0;
       left: 0;
       right: 0;
     }

Answer 1

You can make your image div resize automatically if you place it in a wrapping div that allows for resizing. Just make sure your image div locks-in the aspect ratio.

Note: A scrollbar will appear if your wrapper's aspect ratio does not match the image's aspect ratio.

 html, body { width: 100%; height: 100%; margin: 0; padding: 0; } body { display: flex; align-items: center; justify-content: center; }.resizeable-container { display: flex; align-items: center; justify-content: center; resize: both; overflow: auto; border: thin dashed red; width: 200px; /* Initial size */ }.banner { background-image: url(http://placekitten.com/240/180); background-size: cover; aspect-ratio: 4 / 3; /* 240/180 = 4/3 */ width: 100%; }

 <div class="resizeable-container"> <div class="banner"></div> </div>