CSS Ajustar Imagem a qualquer tamanho de Tela

Lipeco · 21 de outubro de 2020

Boa Noite, então estou com dificuldade em colocar uma imagem e ela ser proporcional em qualquer tela eu fiz desse jeito abaixo.

Gostaria de fazer tipo essa página https://dionsalvadorlloyd.com/.

Quando eu diminuir a tela ela se adequar ao tamanho. Já tentei de várias formas, esse que deixei foi o mais perto que cheguei, estou com dificuldade, agradeço a ajuda.

<!DOCTYPE html>
<html>
<head>
<style>

.container{
	width: 100%;
	text-align: center;
}

img {
	position: relative;
	margin-top: -15px;
	max-width:70%;
	height:auto;
}
</style>

</head>
<div class="container">
	
	<body>
		<img src="https://representacaosobmedida.com/wp-content/uploads/2020/10/Edicao-3-logo-em-baixo-819x1024.png" >

</div>		
</body>
</html>

DiF · 22 de outubro de 2020

@Lipeco Defina o width com "VW"

https://jsfiddle.net/dife/u5rkgy30/8/

Arraste para cima e para baixo a parte superior para ver a mudança de tamanho... veja se isso era o que você procura.

Lipeco · 22 de outubro de 2020

@DiF Valeu mesmo irmão, ajudou demais, como era tão simples haha, eu fiz tanta gambiarra e você resolveu com apenas uma linha. Valeu mesmo.
Adicionei apenas mais umas coisas pra deixar exatamente como eu queria. Agradeço demais meu amigo.

body{
	margin: 0;
	text-align: center;
}

img {
	 width: 100vh;
	 height: 100vh;
}

Entrar

CSS Ajustar Imagem a qualquer tamanho de Tela

Posts recomendados

Lipeco

Link para o comentário

Compartilhar em outros sites

DiF

Link para o comentário

Compartilhar em outros sites

Lipeco

Link para o comentário

Compartilhar em outros sites

Crie uma conta ou entre para comentar

Criar uma conta

Entrar

Quem está navegando aqui 0 usuários estão online

Últimos tópicos

Livros

Cursos

Conteúdo recente

Sobre o Clube do Hardware

Direitos autorais

Mais

Fórum

Atividades

Artigos

Análises

Livros

Cursos