Jump to content
rikaschmitt

Ajustar imagem dentro de uma DIV com overflow

Recommended Posts

Galera tenho uma dúvida: existe como alinhar/ajustar uma imagem dentro de uma DIV que está setada com "overflow:hidden" ?

 

Pois, se a DIV for 300x300 e a imagem for 400x300, a DIV vai "comer" 100px da largura da imagem.. e muitas vezes, a imagem aparecerá desalinhada.

Share this post


Link to post
Share on other sites

Se as alturas dos elementos estiverem definidos, tenta utilizar a "gambiarra" do position: absolute com margem negativa. (Se sua ideia for centralizar a imagem):

div {
	position: relative;
	width: 300px;
	height: 300px;
	overflow: hidden;
}
img {
    width: 400px;
    height: 300px;
    position: absolute;
    left: 50%;
    top: 50%;
    ; /* metade da largura */
    margin-top: -150px; /* metade da altura */
}

Se não, se for apenas pra caber, vais precisar escolher qual eixo queres ocupar 100%, e, outro, definir como auto:

img {
	width: 100%;
	height: auto;
}
/* OU */

img {
	width: auto;
	height: 100%;
}

Por algum motivo, nao ta indo a linha com o comentário /* metade da largura*/. A propriedade CSS é a margin-left com -200 px. Acho que o filtro de palavras ta meio zoado

Edited by Rafael Sirotheau

Share this post


Link to post
Share on other sites

Rafael, sim.

Já pensei nessas duas alternativas.

 

O problema é que é um site onde essas imagens serão enviadas juntamente com o conteúdo, como anexo. Ou seja, a imagem pode vir em vários tamanhos.. (entretanto, somente aparecerá 300x300, que é a dimensão da div).

 

Se eu setar um valor fixo de altura, vai que a imagem não tem tamanho suficiente e ela fique faltando espaço? Ou vice-versa?

 

Talvez eu fique mesmo com a primeira "gambiarra", da position absolute...

Edited by rikaschmitt

Share this post


Link to post
Share on other sites

Então.

Não existe uma forma de fazer a imagem se auto-ajustar na largura e altura da div? Mesmo sobrando espaço..

Pois se eu regulo ela pela altura, algumas imagens mais curtas, ficam com um espaço em branco...

Se eu regulo pela largura, algumas ficam com espaço em branco embaixo...

 

:\

Share this post


Link to post
Share on other sites

 

opa!

 

vou experimentar essa "clip:rect"

Então, não sei se funciono como esperava. Em alguns locais do site, funcionou.

 

Eu coloquei " clip:rect(0px,30px,30px,0px); min-height:100%; " e a imagem fica grandona.. ela nao teria que se limitar aos 30 30?

Share this post


Link to post
Share on other sites

O min-height: 100% vai esticar a imagem dentro do container dela caso a imagem seja menor que o container.

Sugeri isso porque você mencionou não querer que ficasse a faixa branca quando a imagem fosse menor que a div.

No exemplo eu coloquei o clip no mesmo tamanho da div container da imagem.

Share this post


Link to post
Share on other sites

Hm...

O problema é quando a imagem é grande.

Sempre vai sobrar para algum lado, seja altura ou largura.. isso que irrita.

 

Não existe algum comando que ela preencha a div proporcionalmente E caso faltar espaço na altura\largura, ela ajusta para que fique tudo preenchido, mesmo sobrando em algum canto para preencher.

Share this post


Link to post
Share on other sites

Então, é isso que o clip faz. Ele corta a imagem em um tamanho específico.

Atualizei o exemplo http://codepen.io/marlonlp/pen/lmijw

Share this post


Link to post
Share on other sites

estou com o mesmo problema e nenhuma das soluções apresentadas funcionou para mim. Sempre fica um espaço embaixo ou do lado sem preencher

Share this post


Link to post
Share on other sites

Eu andei lendo e nada se aplicava, eu pensei um pouco a respeito quando precisei usar agora pouco
consegui ajustar fazendo uma div fixa só com as propriedades normais e com overflow hidden...
criei outra div dentro dela levando o position relative e nela apliquei um bottom 100px só pra testes mas vou mudar isso pra porcentagem pra ficar melhor segue aí.
<div id="principal">

float: right;
height: 100px;
width: 100%;
overflow: hidden;
clear: both;
______________
dentro dela criei outra
<div id="segundaria">
height: auto;
width: auto;
position: relative;
bottom: 100px;

Assim consegui manipular livremente fazendo um quadro com a primeira foi a solução que achei, rodei bastante e não achei algo que me ajudasse, espero ter ajudado =D

AAA SEM ESQUECER!!! A imagem eu usei em HTML normal da forma tradicional <img src=""> sem atributos algum, me deu bastante mobilidade e em questão poder usar 1 div para várias aplicações sem ter que ficar criando regras, sem mexer com backgrounds, abraços!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.