Resize image automatically

Navigation
2

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

I have already tried to use max-width and set the size in style of div , but did not work.

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=".01.2018\production\imagem.jfif" usemap="#shape"  />
</div>

Note: HTML / CSS / JAVASCRIPT

    
asked by anonymous 22.03.2018 / 14:40

2 answers

2

In order for the image to be responsive, that is, it fits within div , you can use one of the following:

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

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

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

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

Or set in CSS: 

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

Test: 

img{
   width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="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>
    
22.03.2018 / 15:14
1

There is another option, which I do not know if you can use it like this, but it would be using the <img> image that is inside the <div class="container"> as a background.

That way, 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 <div> instead of <img> and image as background of <div>

That way, 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>
    
22.03.2018 / 15:32
How to catch exceptions thrown by the insert () method? Concatenate an @string and a text in XML