Responsive image fit in div box

Question

Responsive image fit in div box

Navigation

#1 by (2 votes)

3

I'm having difficulty making this image fit inside the box, I want it to be independent 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). >

Here is the code, mouseover and div of the box image:

<html>
    <head>
        <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'"></a>
        </div>
    </head>
    <body>
        <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 ;  box-shadow:0 2px 5px #000; border-radius:5px;">
        </div>
    </body>
</html>

I need the picture to fit inside the box, please can anyone help? Link to the image that should appear in the box link .

html5 css imagem

asked by anonymous 30.11.2016 / 02:52

1 answer

Error adding ProgressDialog Capturing the boolean value of a checkbox in PHP

score 2 · Accepted Answer

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

Take a look: link

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

EDIT:

I noticed other errors now, you are using the <head> tag in the middle of the html and there is a </a> tag unnecessarily. The <body> must be placed at the beginning, before the divs ...

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

<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>