CSS

responsive image in css

.responsive_img {
    width: 100%;
    height: auto;
    object-fit: cover;
    /* Prevent the image from stretching. So it crops the image to prevent from awkward stretching */
}

image responsive css

/*width of image is auto adjusted by 70% of its container width.*/
img {
width: 70%;
}
/*if your image has a 50% width for any kind of screen. 
But when you want to make it full-size for mobile devices you need to get help from media queries:*/
/*using media Queries */
@media only screen and (max-width: 480px) {
img {
width: 100%;
}
}

CSS Responsive Image

  <style>
#imgx img {
    float:left;
    margin:2px;
    border-radius:7px;
    display: block;
    max-width:100%;
    height:auto;
    width:100%;
}
  </style>
  
  
  
  
<div id="imgx" class="col-xs-12 col-sm-12" style="padding-bottom:5px;">

html responsive images

<picture>
  <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg">
  <source media="(min-width: 800px)" srcset="elva-800w.jpg">
  <img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">
</picture>