Fixar altura e largura de divs

HTML5

CSS3

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

Fabio Zech

Curtidas 0

Respostas

Alex William

Alex William

29/07/2022

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. ;)
GOSTEI 0
Fabio Zech

Fabio Zech

29/07/2022

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.
GOSTEI 0
Nomad

Nomad

29/07/2022

https://freefrontend.com/css-cards/
GOSTEI 0
POSTAR