Resize image automatically

Question

When programming a web page via PC I added an image map whose image was relatively large, occupying the width of the whole page. The problem is that when accessing through a smaller screen, such as a notebook for example, the image does not resize along with the div as the rest of the page.

I’ve tried to use max-width and set the size on styleof div, but it didn’t work out.

This is the code I’m using:

---

<div class="container">
<map name = "shape">
<area shape = "rect" coords = "0, 0, 500, 500" 
href="/31.01.2018/production/ajax/historicoperini1.php"/>
</map>
<img src="\31.01.2018\production\imagem.jfif" usemap="#shape"  />
</div>

---

Note: HTML/CSS/JAVASCRIPT language

Answer 1

So that the image is responsive, that is, self-adjusting within the div, you can use one of the alternatives:

If you are using Bootstrap, you can use the class .img-fluid:

<img class="img-fluid" src="\31.01.2018\production\imagem.jfif" usemap="#shape"  />

Or you can use the attribute width="100%":

<img width="100%" src="\31.01.2018\production\imagem.jfif" usemap="#shape"  />

Or define in CSS:

<style>
img{
   width: 100%;
}
</style>

Testing:

img{
   width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="container">
   <map name = "shape">
      <area shape = "rect" coords = "0, 0, 500, 500" href="/31.01.2018/production/ajax/historicoperini1.php"/>
   </map>
   <img width="100%" src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg" usemap="#shape"  />
</div>

Answer 2

There’s another option, I don’t know if you can use it like this, but it would be using the image <img>that is inside the <div class="container"> in the form of background.

So for example:

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
.container.imagem{
    width: 100%;
    min-height: 33%;
    background-image: url(http://placecage.com/900/300);
    background-size: cover;
    background-position: center;
}

<div class="container imagem">
    <map name = "shape">
        <area shape = "rect" coords = "0, 0, 500, 500" href="/31.01.2018/production/ajax/historicoperini1.php"/>
    </map>
</div>

Or following the same idea, but with a <div> in place of <img> and the image as background of <div>

So for example:

.imagem{
    width: 100%;
    min-height: 200px;
    background-image: url(http://placecage.com/900/300);
    background-size: cover;
    background-position: center;
}

<div class="container">
    <map name = "shape">
        <area shape = "rect" coords = "0, 0, 500, 500" href="/31.01.2018/production/ajax/historicoperini1.php"/>
    </map>
    <div class="imagem"></div>
</div>