Responsive image adjustment in div box

Asked

Viewed 591 times

3

I’m having difficulty making this image fit inside the box, I want regardless of the size of the screen the box always appears in the same place (OK) and the image inside fits the size of the box (HELP).

Follows the code, mouseover and the div of the box image:

<html>
    <head>
        <div style="position:fixed;right:35%;top:10px; left:35%; ">
            <img src="https://i.stack.imgur.com/IrSrV.png"  onmouseover="getElementById('descricaoo').style.display='block'" onmouseout="getElementById('descricaoo').style.display='none'"></a>
        </div>
    </head>
    <body>
        <div id="descricaoo" style="position:fixed; display:none;  left:25%; top:25%; bottom:25%; right:25%;background:url(https://i.stack.imgur.com/PhdPC.png) center no-repeat ;  box-shadow:0 2px 5px #000; border-radius:5px;">
        </div>
    </body>
</html>

I need the image to fit inside the box, please, can someone help? Image that should appear in full inside the box:

inserir a descrição da imagem aqui

css html5 image

1 answer

2


Just use the property max-width and set to 100%. This will cause the div to adjust the width of the screen, but will never be larger than the original.

Take a look: http://www.w3schools.com/css/css_rwd_images.asp

Another hint, the opacity attribute defines the element’s transparency and can vary only between 0 and 1. Ex: 0.5 is equivalent to 50% transparency.

EDIT:

I noticed other mistakes now, you’re using the tag <head> in the middle of html and there is a tag </a> no need. The <body> shall be set at the beginning before the Ivs...

Maybe the command you want is background-size: cover. Behold:

<body>
  <div style="position:fixed;right:35%;top:10px; left:35%; ">
    <img src="http://i64.tinypic.com/id93qr.png" onmouseover="getElementById('descricaoo').style.display='block'" onmouseout="getElementById('descricaoo').style.display='none'">
  </div>
  <div id="descricaoo" style="position:fixed; display:none;  left:25%; top:25%; bottom:25%; right:25%;background:url(http://i66.tinypic.com/35a3frc.png) center no-repeat ; background-size: cover; box-shadow:0 2px 5px #000; border-radius:5px;  ">
  </div>
</body>

  • I edited the answer, you can run to test if that’s how you want it.

Browser other questions tagged css html5 image

You are not signed in. Login or sign up in order to post.