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

Question

to train my web dev skills, I clone some pages, but everytime there is a huge image, I can't make it fully responsive, it look destroyed on phone or when you reduce the screen size. Today I'm cloning this page :

https://500px.com/

As you can see this site is fully fully responsive, I mean if I reduce the page anyway it will be "ok". Particulary the first big image with the couple on a mountain, even the text in 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>

Fiddle

But the image isn't responsive like the website. If I reduce it too much, the text and the image will

So here are my two questions : Do they used Jquery/bootstrap/javascript to make their first big image responsive? If yes can you lead me to some tutotial or try to explain? If no how they done that?

Answer 1

There's no need for jQuery or Javascript, in this case, just plain CSS will do the trick. Instead of using an img element we will use a div and place the image as a background image.

The following would be the html that should replace your img element;

<div class="responsive_img">

</div>

And this would be your CSS;

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

Here's a simplified JSFiddle that does what you want, and here is a JSfiddle of how you would implement this into your current demo.

There are probably ways of doing this with any of the languages you mentioned in your question, but this is probably the simplest.