Fixar altura e largura de divs

29/07/2022

Ol� pessoal

Tenho pouqu�ssima experi�ncia com front, e preciso de uma ajuda.
Preciso criar 5 divs onde seria 3 colunas e 2 linhas, onde 2 div de 200px cada a do meio de 400px e mais 2 de 200px cada ( ate aqui consegui) mas o problema come�a agora isso precisa ser responsivo e dentro de cada uma vai uma imagem, mas essas imagem normalmente s�o maiores que as medidas acima, preciso que as imagem se ajustem as medidas das divs, se cortar parte da imagem n�o tem problema mas que preencham as medidas informadas.

Algu�m conseguiria me dar uma ajuda, como falei meu conhecimento � muito b�sico em front, acredito que seja algo f�cil mas estou a 2 dias e n�o consegui evoluir.

Obrigado

Fabio Zech

Curtir t�pico + 0

Responder

Posts

29/07/2022

Alex William

Op�, amigo. Tudo bem?

Te aconselho um framework CSS front-end, vulgo Bootstrap.

Ele tem classes pr�-definidas que v�o te ajudar bastante.

https://getbootstrap.com/

Dentro da pr�pria doc dele, tem uns exemplos bem bons, na parte de grid acho que te ajudaria bastante.

https://getbootstrap.com/docs/5.2/layout/grid/

Espero ter ajudado. ;)

Responder

Gostei + 0

29/07/2022

Fabio Zech

Agrade�o a resposta, sim estou usando o bootstrap, o que consegui fazer ate o momento foi:

.alt2{object-fit: cover!important;
            max-height: 200px;
            min-height: 200px;
            width: 100%!important}
        .alt{object-fit: cover!important;
            max-height: 400px;
            min-height: 400px;
            width: 100%!important}

<div class="container">
        <div class="row">
            <div class="col-lg-4">
                <div class="col-lg-12 alt2"><img class="alt2" src="https://img.freepik.com/fotos-gratis/3d-rendem-de-uma-mesa-de-madeira-com-uma-imagem-defocussed-de-um-barco-em-um-lago_1048-3432.jpg?w=2000" /></div>
                <div class="col-lg-12 alt2"><img class="alt2" src="https://img.freepik.com/fotos-gratis/3d-rendem-de-uma-mesa-de-madeira-com-uma-imagem-defocussed-de-um-barco-em-um-lago_1048-3432.jpg?w=2000" /></div>    
            </div>
            <div class="col-lg-4">
                <div class="col-lg-12 alt"><img class="alt" src="https://img.freepik.com/fotos-gratis/3d-rendem-de-uma-mesa-de-madeira-com-uma-imagem-defocussed-de-um-barco-em-um-lago_1048-3432.jpg?w=2000" /></div>
            </div>
            <div class="col-lg-4">
                <div class="col-lg-12 alt2"><img class="alt2" src="https://img.freepik.com/fotos-gratis/3d-rendem-de-uma-mesa-de-madeira-com-uma-imagem-defocussed-de-um-barco-em-um-lago_1048-3432.jpg?w=2000" /></div>
                <div class="col-lg-12 alt2"><img class="alt2" src="https://img.freepik.com/fotos-gratis/3d-rendem-de-uma-mesa-de-madeira-com-uma-imagem-defocussed-de-um-barco-em-um-lago_1048-3432.jpg?w=2000" /></div>
            </div>
        </div>        
    </div>

Mas o preenchimento total da div pela imagem n�o consegui fazer e para entender melhor meu objetivo � chegar pr�ximo a esse exemplo aqui nesse site que achei, https://maximoveis.com.br/imovel/8255/apartamento-2-quartos-solar-das-araucarias-itaipava-itajai/
A partir disso algu�m conseguiria me ajudar, n�o digo do efeito de passar o mouse mas sim esse estilo de apresenta��o de imagem.

Responder

Gostei + 0

29/07/2022

Nomad

https://freefrontend.com/css-cards/

Responder

Gostei + 0