CSS - Image disappeared when remove height

Question

How can I make the following image responsive? When I try to remove height & width, the image just disappeared.

I am creating an image-map using CSS as I don't want to use an HTML MAP.

I want to create a responsive image.

 <div class="img-responsive" style="position:relative; height:1122px; width:779px; background:url(https://image.ibb.co/eZWkb7/0001.jpg) 0 0 no-repeat;"> <a style="background-color:red;position:absolute; top:319px; left:198px; width:61px; height:56px;" title="" alt="" href="1" target="_self"></a> </div> 

Answer 1

You should try to make width : 100%, without giving height properties. That should make your element responsive.

TIPS : you should consider placing your style into a separate CSS file.

Answer 2

Responsive images will automatically adjust to fit the size of the screen.

If you want to create responsive images which will automatically fit with your theme size, then you should add CSS class (.responsive) as below.

.responsive {
    width: 100%;
    height: auto;
} 

After adding CSS class, you need to use responsive class in HTML as below.

<img src="nature.jpg" alt="Nature" class="responsive">