Publicado em 8 de mai.

Forçar imagem

Olá pessoal !

Eu defini em minha página as dimensões da minha div e as vezes a imagem estoura as dimensões.

Como que eu faço para que a imagem obedeça as dimensões da minha div, tipo assim, dando um stretch na imagem dentro da div sem redimensionar a minha div ?

Desde já agradeço.

Discussão (4)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Mateus Silva· 8 de mai.

em html:

ou em css:

div#imagem {

 width:100px;
 height:100px;
 background-size:100px 100px;
}

guilomaker· 8 de mai.

você pode fazer assim

.paidaimagem img {

 width:800px;
	}

baguera13· 9 de mai.

ou via CSS externo

elemento {width:100%;}

André do Vale· 9 de mai.

Diferente dos colegas, eu prefiro trabalhar com a proporção da imagem, e cortar qualquer sobra (não permitindo que a imagem sofra distorção).

Um exemplo, para imagem com proporção 4x3:

div {

 overflow: hidden;
}

div img {

 min-width: 100%;
 min-height: 100%;
 max-width: calc((100% / 3) * 4); /* 100% divido pela altura da proporção, vezes a largura da proporção */
 max-height: calc((100% / 3) * 4);
 [BUG DO FÓRUM: aqui é margin pra esquerda de -16.65%] /* valor próximo a de (((100/3)*4)-100)/2 */
}

Exemplo visual:

<!DOCTYPE html>

<html>
<head>
	<title>Teste</title>
</head>
<style type="text/css">
	div {
 position: absolute;
 width: 400px;
 height: 400px;
 top: 50%;
 left: 50%;
 margin: -200px 0 0 -200px;
	}
	div::before {
 content: "area visivel";
 position: absolute;
 background: rgba(255,0,0,.4);
 color: #fff;
 font-weight: bold;
 line-height: 400px;
 width: 100%;
 height: 100%;
 text-align: center;
	}
	div img {
 min-width: 100%;
 min-height: 100%;
 max-width: calc((100% / 3) * 4); /* 100% divido pela altura da proporção, vezes a largura da proporção */
 max-height: calc((100% / 3) * 4);
 [BUG DO FÓRUM: aqui é margin pra esquerda de -16.65%] /* valor próximo a de (((100/3)*4)-100)/2 */
	}
</style>
<body>
<div>
	<img src="http://placehold.it/800x600">
</div>
</body>
</html>

Agora, caso a proporção da imagem seja igual à do elemento pai, coloque apenas width e height 100%.