3

Estou tendo dificuldade em fazer essa imagem se ajustar dentro do box, quero que independente do tamanho da tela o box sempre apareça no mesmo lugar (OK) e a imagem dentro se ajuste ao tamanho do box (HELP).

Segue o código, mouseover e o div da imagem do box:

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

Preciso que a imagem se ajuste dentro do box, por favor, alguém pode ajudar? Imagem que deveria aparecer por inteira dentro do box:

inserir a descrição da imagem aqui

1 Resposta 1

2

Basta utilizar a propriedade max-width e definir como 100%. Isso fará com que a div se ajuste a largura da tela, mas nunca ficará maior que a original.

Dê uma olhada: http://www.w3schools.com/css/css_rwd_images.asp

Outra dica, o atributo opacity define a transparência do elemento e pode variar somente entre 0 e 1. Ex: 0.5 é equivalente a 50% de transparência.

EDIT:

Percebi outros erros agora, você está usando a tag <head> no meio do html e há uma tag </a> sem necessidade. O <body> deve ser colocado no início, antes das divs...

Talvez o comando que você queira seja background-size: cover. Veja:

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

1
  • Editei a resposta, você pode executar para testar se é assim que deseja.
    – Gabplay
    1/12/2016 às 1:42

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .