Ajustar imagem dentro de uma DIV com overflow

[rikaschmitt 54]

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.

[Rafael Sirotheau 43]

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 Julho 14, 2014 por Rafael Sirotheau

[rikaschmitt 54]

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 Julho 14, 2014 por rikaschmitt

[victorqueiroz 34]

para isso, você terá que redmencionar as imagens que são enviadas pelo servidor!

[rikaschmitt 54]

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...

 

:\

[Marlon Pacheco 132]

Algo nesse sentido?

http://codepen.io/marlonlp/pen/lmijw

[rikaschmitt 54]

Algo nesse sentido?

http://codepen.io/marlonlp/pen/lmijw

 

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?

[Marlon Pacheco 132]

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.

[rikaschmitt 54]

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.

[Marlon Pacheco 132]

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

[rikaschmitt 54]

Valeu Marlon.

Vou dar umas testadas aqui.

[Luckas 0]

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

[Dellamarque 1]

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!

[RodrigoDev 0]

Dellamarque, parabéns, procurei bastante por uma solução na internet e a sua foi a única que funcionou integralmente até o momento.

[ronier 0]

Olá, tópico antigo, más um dos poucos que achei, e ainda não era oque precisava, que seria independente da resolução da imagem a mesma se adaptar a minha DIV.

Depois de muito estudo consegui fazer esse projeto. Espero que ajude mais alguém.

 https://codepen.io/ronier/pen/YzXJPgP