Fixar altura e largura de divs
29/07/2022
0
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
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. ;)
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
29/07/2022
Fabio Zech
Agradeço a resposta, sim estou usando o bootstrap, o que consegui fazer ate o momento foi:
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.
.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
Clique aqui para fazer login e interagir na Comunidade :)
