Manter proporção da caixa sem javascript
Boa tarde
Estou montando um site responsivo e liquido
E algumas da minhas caixas section quero que seja redondas igual uma bola, então estou usando o border-radius 100%, queria saber se posso deixar essa caixa 100% para que quando eu aumentar e diminuir o tamanho da tela, a caixa ainda se mantenha redonda, um exemplo disso é este código abaixo:
<!DOCTYPE html>
<html>
<head>
<title>Proporção</title>
<meta charset="UTF-8">
<style>
body {
background: #0f0;
}
section {
max-width: 700px;
margin: 0 auto;
margin-top: 30px;
}
img {
width: 100%;
background: radial-gradient(#f00, #00f);
border-radius: 100%;
float: left;
z-index: 1;
}
img:hover {
box-shadow: 0 0 50px 5px #000;
transition-duration: 0.3s;
}
figcaption {
position: relative;
z-index: 2;
text-align: center;
vertical-align: middle;
}
</style>
</head>
<body>
<section>
<a href="">
<img src="transparent.png">
<figcaption>Texto</figcaption>
</a>
</section>
</body>
</html>
Só que para poder manter a proporção 1:1 (quadrado) tive que usar uma imagem transparente de 1px por 1px e dando cor nela, só que eu quero também é poder centralizar o texto bem no meio da caixa, tanto verticalmente como horizontalmente eo tamanho da fonte aumentar conforme o tamanho da bolinha sem vazar da caixa e sem ficar muito pequena , um exemplo disso é o meu site [http://marchi.esy.es](http://marchi.esy.es) em que fiz isso, mais a bolinhas não aumentam conforme o tamanho da tela e nem o texto, só depois de uma certa resolução que eu usei o @média. para adaptar para mobile
Eu quero fazer tudo isso com CSS, sem JavaScript, pois ainda vou aprender JavaScript no semestre que vemDiscussão (14)
Carregando comentários...