Ir para conteúdo
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.

Compartilhar este post


Link para o post
Compartilhar em outros 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

Editado por Rafael Sirotheau

Compartilhar este post


Link para o post
Compartilhar em outros 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...

Editado por rikaschmitt

Compartilhar este post


Link para o post
Compartilhar em outros 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...

 

:\

Compartilhar este post


Link para o post
Compartilhar em outros 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?

Compartilhar este post


Link para o post
Compartilhar em outros 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.

Compartilhar este post


Link para o post
Compartilhar em outros 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.

Compartilhar este post


Link para o post
Compartilhar em outros 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

Compartilhar este post


Link para o post
Compartilhar em outros 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

Compartilhar este post


Link para o post
Compartilhar em outros 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!

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.