HTML Problema em relação à estética do site em HTML5

Daniel Cipriano · 3 de junho de 2018

Bom dia, estou criando um site em HTML5 e verifiquei que ocorre um problema ao minimizar o tamanho da tela do navegador, as imagens ao invés de se ajustarem se sobrepõe uma por cima da outra. Estou achando que o problema é na definição de POSITION em CSS mas não tenho certeza. Segue o código HTML e CSS e o print da página. Agradeço a ajuda.

PRINT: http://prntscr.com/jq9utg

<!DOCTYPE HTML>
<html lang='pt-br'>
<head>
	<meta charset='UTF-8'/>
	<title>Trabalhos|Seminários|Vídeos</title>
	<link rel='stylesheet' type='text/css' href='css/formatacao.css'/>
</head>
<body>
	<header id='cabecalho'>
		<h1>TRABALHOS | SEMINÁRIOS | VÍDEOS</h1>
	</header>
	<nav id='menu'>
		<figure id='hist'>
			<img src='capas/caphist/caph.PNG'/>
			<figcaption>
				<h2>HISTÓRIA</h2>
			</figcaption>
		</figure>
		
		<figure id='geo'>
			<img src='capas/capgeo/capgeo.png'/>
			<figcaption>
				<h2>GEOGRAFIA</h2>
			</figcaption>
		</figure>
		<aside>
			<figure id='bio'>
				<img src='capas/capbio/capbio.png'/>
				<figcaption>
					<h2>BIOLOGIA</h2>
				</figcaption>
			</figure>
			<figure id='edfis'>
				<img src='capas/capedfis/capedfis.png'/>
				<figcaption>
					<h2>Educação<br>Física</h2>
				</figcaption>
			</figure>
		</aside>
	</nav>
	<footer id='rodape'>
	</footer>
</body>
</html>

@charset 'UTF-8';
@import url('https://fonts.googleapis.com/css?family=Jua');
@import url('https://fonts.googleapis.com/css?family=Bowlby+One+SC');
@import url('https://fonts.googleapis.com/css?family=Caesar+Dressing');
@import url('https://fonts.googleapis.com/css?family=Courgette');
@import url('https://fonts.googleapis.com/css?family=Cabin+Sketch');
@import url('https://fonts.googleapis.com/css?family=Permanent+Marker');


body{
	background-color: #a14343;
}
header#cabecalho {
	position: relative;
	display: block;
	background-color: #920f0f;
	top: -30px;
	height: 100px;
	box-shadow: 0px 10px 10px rgba(0,0,0,0.5);
	padding-bottom: 0px;
}
header#cabecalho h1{
	position: relative;
	font-family: 'Jua', sans-serif;
	font-size: 30pt;
	color: white;
	text-align: center;
	padding-top: 30px;
}
nav#menu{
	position: relative;
	padding-bottom: 500px;
	margin: -20px 40px auto 40px;
	border: 5px solid white;
	border-top: none;
	border-bottom: none;
}
/*-------------------------------------------------------------*/
figure#hist{
	position: absolute;
	border: 1px solid black;
	width: 600px;
	height: 338px;
	margin-top: 50px;
}
figure#hist figcaption{
	position: absolute;
	right: 210px;
	top: 110px;
}
figure#hist figcaption h2{
	font-size: 35pt;
	font-family: 'Caesar Dressing', cursive; 
	color: white;
}
figure#hist:hover{
	box-shadow: 0px 5px 5px rgba(0,0,0,.5);
}
figure#hist figcaption h2:hover{
	text-decoration: underline;
	font-size: 36pt;
}
/*-------------------------------------------------------------*/
figure#geo{
	position: relative;
	top:450px;
	border: 1px solid black;
	width: 600px;
	height: 338px;
}
figure#geo figcaption{
	position: absolute;
	right: 200px;
	top: 110px;
}
figure#geo figcaption h2{
	font-family: 'Courgette', cursive;
	font-size: 32pt;
	color: white;
}
figure#geo:hover{
	box-shadow: 0px 5px 5px rgba(0,0,0,.5);
}
figure#geo figcaption h2:hover{
	font-size: 33pt;
	text-decoration: underline;	
}
/*-------------------------------------------------------------*/
aside figure#bio{
	position: relative;
	float: right;
	bottom: 322px;
	width: 600px;
	height: 338px;
	border: 1px solid black;	
}
aside figure#bio figcaption{
	position: absolute;
	right: 195px;
	top: 110px;
}
aside figure#bio figcaption h2{
	font-family: 'Cabin Sketch', cursive;
	font-size: 35pt;
	color: white;
}
aside figure#bio:hover{
	box-shadow: 0px 5px 5px rgba(0,0,0,.5);
}
aside figure#bio figcaption h2:hover{
	font-size: 36pt;
	text-decoration: underline;
}
/*-------------------------------------------------------------*/
aside figure#edfis{
	position: relative;
	float: right;
	bottom: 293px;
	width: 600px;
	height: 338px;
	border: 1px solid black;
}
aside figure#edfis figcaption{
	position: absolute;
	right: 180px;
	top: 70px;
}
aside figure#edfis figcaption h2{
	font-family: 'Permanent Marker', cursive;
	font-size: 35pt;
	color: white;
}
aside figure#edfis:hover{
	box-shadow: 0px 5px 5px rgba(0,0,0,.5);
}
aside figure#edfis figcaption h2:hover{
	font-size: 36pt;
	text-decoration: underline;
}
/*-------------------------------------------------------------*/
footer#rodape{
	border-top: 5px solid white;
	background-color: #920f0f;
}

Luís Roberto C. da Silva · 3 de junho de 2018

Na verdade o css das imagens devem ficar com height:auto para se auto redimensionar. Mas isso tem que ser na tag img:

<img style="height:auto" src='capas/capedfis/capedfis.png'/>

DiF · 3 de junho de 2018

@Luís Roberto C. da Silva @Daniel Cipriano Na verdade o height em auto não vai funcionar.

É necessário usar a medida em: VH.

Basta criar uma regra CSS para o elemento img contido no figure

figure img{
   height: 70vh;
}

Assim terá a responsividade necessária para reduzir as imagens quando reduz o tamanho da tela.

Exemplo online: https://jsfiddle.net/dife/3b1yyo1x/

Luís Roberto C. da Silva · 3 de junho de 2018

18 minutos atrás, DiF disse:
@Luís Roberto C. da Silva @Daniel Cipriano Na verdade o height em auto não vai funcionar.

É necessário usar a medida em: VH.

Basta criar uma regra CSS para o elemento img contido no figure
figure img{
   height: 70vh;
}
Assim terá a responsividade necessária para reduzir as imagens quando reduz o tamanho da tela.

Exemplo online: https://jsfiddle.net/dife/3b1yyo1x/