How to create a fully responsive image (not only width: 100% and height: auto)

Question

to train my skills with web developers, I clone some pages, but every time there is a huge image, I cannot make it fully responsive, it looks corrupted by phone or reduces the screen size. Today I am cloning this page:

https://500px.com/

As you can see, this site is completely responsive, I mean that if I reduce the page, it will be "normal". Particulary is the first large image with a couple on the mountain, even the text is responsive!

Here is my code:

<!-- Jquery qui fait que le header devient blanc quand on scroll -->
$(window).on("scroll", function() {
    if($(window).scrollTop() > 10) {
        $("header").addClass("active");
    } else {
        //remove the background property so it comes transparent again (defined in your css)
       $("header").removeClass("active");
    }
});

body {
	margin: 0 auto;
	
}

header {
width: 100%;
height:40px;
background-color: transparent;
position: fixed;

}

.active { background-color: white;}

.all {
	display: flex;
	background-color: transparent;
}
.po {
	padding: 0 50px 0 50px;
}
.pa {
	padding: 0 50px 0 0px;
}
.pi {
	padding: 0 50px 0 0;
	}
.home {
	
	width: 100%;
}
.hm {
	width:100%;
	margin-top: -200px;
	max-width: 100%;
	min-height: 1000px;
	min-width: 1000px;
}
h2 { 
   position: absolute; 
   top: 200px; 

   width: 100%; 
   text-align: center;
}
h2 span { 
   color: white; 
   font: bold 24px/45px Helvetica, Sans-Serif; 
   letter-spacing: -1px; 
   font-size: 40px; 

   padding: 10px; 
}

<header>
  <div class="all">
    <div class="px"> 500px </div>
    <div class="po"> Community </div>
    <div class="pa"> MarketPlace </div>
    <div class="pi"> Log in </div>
    <div class="pu"> Sign Up </div>
  </div>
</header>


<div class="home">
  <img class="hm" src="http://wallpapercave.com/wp/R6ZWbAb.jpg"  >
  <h2><span> Home to everyone best photos </span></h2>
</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Run codeHide result

Fiddle

But the image does not respond like a website. If I reduce it too much, the text and image will be

, : Jquery/bootstrap/javascript, ? , - ? , ?

Answer 1

jQuery Javascript, CSS . img div .

html, img;

<div class="responsive_img">

</div>

CSS;

.responsive_img{
  width: 100%;
  height: 800px;
  background: url('http://wallpapercave.com/wp/R6ZWbAb.jpg');
  background-size: cover;
  background-position: center;
}

JSFiddle, , , JSfiddle , .

, , , , , .