<img src="your-image.jpg" alt="description" class="responsive-image">
  //1st way
.responsive-image {
  max-width: 100%;
  height: auto;
}
//2nd way
.responsive-image {
  width: 100%;
  height: auto;
}

<div class="responsive-background"></div>
//3rd way
  .responsive-background {
  width: 100%;
  height: 300px; /* Or any desired height */
  background: url('your-image.jpg') no-repeat center center;
  background-size: cover;
}

//4th way
<picture>
  <source srcset="small.jpg" media="(max-width: 600px)">
  <source srcset="medium.jpg" media="(max-width: 1200px)">
  <img src="large.jpg" alt="description" class="responsive-image">
</picture>
.responsive-image {
  width: 100%;
  height: auto;
}