Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
6
respostas

Ajustar a imagem ao tamanho do background da div

por Fábio Henrique Crippa
| 48.6k xp | 20 posts

Bom dia. Estou fazendo um album de fotos semelhante ao facebook. Criei uma div e defini as margins para fazer o espaco onde quewro colocar a foto de capa, mas nao consigo ajustar a imagem de capa ao tamanho da div. Aumentei a largura da foto e ela ficou esticada, horrivel. Quero saber como eu faco para ajustar automaticamente a foto ao tamanho do background da div? Este e o css:

.capa {
    background: #FFFFFF;
    margin-left: 200px;
    margin-right: 200px;

}

.imagem-capa {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 20%;
6 respostas
por mbthales
| 200.1k xp | 165 posts

Olá Fábio, tudo bem?

Poderia mandar seu HTML por aqui também? Para eu entender melhor o que você está querendo fazer.

por Fábio Henrique Crippa
| 48.6k xp | 20 posts

Obrigado. So para entender melhor o que estou fazendo...estou fazendo uma pagina semelhante ao facebook.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Fabiobook</title>
        <link rel="stylesheet" href="reset.css">
        <link rel="stylesheet" href="index.css">
    </head>

    <body>
        <header>
            <div class="caixa">
                <h1><img src="imagens/foto-perfil.jpg" width="50" height="50"></h1>                
                <nav>
                    <ul>
                        <li><a href="index.html">Fabio</a></li>
                        <li><a href="album.html">Galeria de fotos</a></li>
                    </ul>
                </nav>
            </div>
        </header>       

            <div class="capa">
                <img class="imagem-capa" src="imagens/index.jpg">
            </div>
    </body>
</html>
por mbthales
| 200.1k xp | 165 posts

Você está querendo fazer albums de fotos assim? https://imgur.com/hmncd0Q

Se sim, é só definir o tamanho da sua div e no css utilizar das propriedades background. No exemplo, eu fiz da seguinte maneira:

  <div class="container">

    <div class="capa-imagem"></div>
    <div class="capa-imagem"></div>
    <div class="capa-imagem"></div>

  </div>
  .container{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  .capa-imagem{
    height: 300px;
    width: 300px;
    margin: 10px;
    background-image: url("https://images.unsplash.com/photo-1578355809762-1a66bac2595c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1054&q=80"); //seleciona imagem
    background-position: center; //centraliza imagem
    background-size: cover; //imagem cobre toda área do div
  }

Espero ter ajudado!

por Fábio Henrique Crippa
| 48.6k xp | 20 posts

Obrigado mais uma vez. Sim. Estou fazendo um album de fotos. Fiz estas alteracoes no css, mas o resultado foi o mesmo que o meu. Vou citar um exemplo bobo do que desejo. Imagine um porta retratos com as dimencoes 100 x 100, este porta retrato, podemos considerar a div. E agora imagine uma foto com as dimencoes 60 x 60. Eu quero colocar a foto no porta retrato e desejo que a foto ocupe todo o espaco do porta retrato sem distorcer a foto.

solução!
por mbthales
| 200.1k xp | 165 posts

Coloque seu código e suas imagens (60x60) em uma pasta no Google Drive?

por Fábio Henrique Crippa
| 48.6k xp | 20 posts

Eu consegui resolver. Usei essas propriedades: overflow, object-fit, object-position. Obrigado