Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

dr.x

Forçar imagem

Por , em Desenvolvimento frontend

Recommended Posts

dr.x    1

dr.x
Postado

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.

Compartilhar este post

Link para o post
Compartilhar em outros sites

André do Vale    76

André do Vale
Postado

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

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

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

  Aceito