CSS - Altura automática proporcional à largura sem JavaScript \| TreinaWeb Promoção no ar Matricule-se agora e garanta **54% de desconto** Termina em Tempo restante da oferta: 03 Horas 46 Min 24 Seg Tempo restante da oferta: 03 46 24 [Assinar →](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Explorar [ Quanto custa? ](#assinatura) [ FAQ ](https://www.treinaweb.com.br#faq) [Matricule-se](#assinatura) [ Entrar ](https://www.treinaweb.com.br/login) [ Início ](https://www.treinaweb.com.br) [ Artigos ](https://www.treinaweb.com.br/blog) CSS - Altura automática proporcional à largura sem JavaScript [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) # CSS - Altura automática proporcional à largura sem JavaScript Aprenda a definir elementos com dimensões proporcionais com CSS sem nenhuma linha de JavaScript. [ Akira Hanashiro ](https://www.treinaweb.com.br/blog/autor/akira-hanashiro) 7 anos atrás ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/01/07101943/Aspect-Ratio.png) Olá Web Developer! Hoje em dia precisamos desenvolver páginas para os mais variados tamanhos de telas. Isso está cada vez mais simples, principalmente com o [Flexbox](https://www.treinaweb.com.br/blog/css-flexbox-um-guia-interativo-parte-1-containers/ "Flexbox") e [CSS Grid](https://www.treinaweb.com.br/blog/css-grid-um-guia-interativo-parte-1-containers/ "CSS Grid"). Porém, não temos ainda uma propriedade no CSS que nos permite definir a proporção das dimensões de um elemento. Aqui nós aprenderemos como é fácil fazer isso. [ ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/10/E-BOOK-GRATUITO-HTML.jpg) ](https://www.treinaweb.com.br/ebook/guia-HTML/) ## Padding com porcentagem Algo que pode passar despercebido por alguns desenvolvedores é usar porcentagem como valor das propriedades de margem interna (padding). Quando definimos um valor em porcentagem, estamos querendo que aquele valor seja relativo a um outro valor. Então quando definimos que queremos um `width` de `50%`, estamos dizendo que queremos que ele tenha a metade do valor do `width` do elemento pai. Se este tiver 200px de largura, o filho com 50% ficará com 100px de largura. [ ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/10/E-BOOK-GRATUITO-COMECANDO-JS.png) ](https://www.treinaweb.com.br/ebook/guia-javascript) Quando usamos porcentagem no padding, ele não irá pegar a porcentagem relativa ao padding do elemento pai, e sim, proporcional à largura do pai. Veja no exemplo interativo abaixo: ```html ``` Note que eu não defini nenhuma altura para `.box-container`, apenas largura. E no seu elemento filho, `.box-content`, mandei ele ter altura igual a 0 e coloquei uma porcentagem em `padding-bottom` (também poderia ser `padding-top`). Assim, sua dimensão vertical ficará por conta do `padding-bottom`. Como dito anteriormente, a propriedade `padding` utiliza a largura do elemento pai como base para calcular seu valor quando utilizamos porcentagem. Então se colocarmos o pai com `width: 200px` e o filho tiver `padding-bottom: 50%`, sua altura será `100px`. Como o elemento filho tem sua altura modificada, o elemento pai também terá. Podemos aproveitar isso para criar um container que mantenha as proporções entre largura e altura. Assim, um elemento que tem sua largura modificada pela largura da tela manterá uma altura proporcional. Teste com outros valores. Um bom exemplo é deixar o `padding-bottom` com valor `100%`. Isso fará com que a altura do elemento filho seja igual à largura do elemento pai, resultando em um quadrado, não importa o quanto a largura do elemento pai seja modificada. Só um detalhe: eu defini `width` do `.box-container` em `px` apenas para dar um exemplo, mas você pode usar qualquer unidade para a largura do elemento pai, como `%` ao criar um elemento responsivo para a sua página. ## Criando um container reutilizável Agora que já entendemos o conceito, vamos arrumar esse elemento para que ele seja reutilizável em qualquer projeto. Vamos por partes para entender como ele vai funcionar até chegar em um resultado bem simples e limpo. ### Aproveitando pseudo-elementos Para não ter o trabalho de escrever no HTML um elemento como container que cuidará da largura e um elemento filho apenas com `padding-bottom` para cuidar da altura, podemos aproveitar os Pseudo-Elementos. Assim criaremos uma única tag e o CSS automaticamente irá inserir o responsável pela altura. Vamos então remover o `box-content` e passar suas propriedades para um pseudo-elemento de `box-container`. ```html ``` E nosso CSS está no exemplo abaixo: Ok, não temos mais uma `div` vazia, passamos essa função para um pseudo-elemento que já está crescendo, mas o elemento pai não está mais. O pseudo-elemento também não possui mais largura, pois sua dimensão é baseada no seu conteúdo, e definimos `content` como vazio (““). Mas isso não importa, já que ele é apenas um controlador de altura. O que faremos agora é arrumar para que o elemento pai possa ter sua altura modificada. ### Arrumando os pseudo-elementos A primeira coisa a se notar é que o pseudo-elemento está ocupando espaço. Isso pode atrapalhar o conteúdo que quisermos colocar no nosso container. Um jeito simples para ele não atrapalhar nosso conteúdo é colocar um `float`. A propriedade `float` sempre precisa ser limpada para evitar problemas no layout. Podemos fazer isso usando outro pseudo elemento, que colocaremos no `::before`. Como por padrão os pseudo-elementos crescem de acordo com seu conteúdo e aqui também colocamos o `content` vazio, vamos mudar seu `display` para `block` para ele ter um tamanho. Nosso código ficará assim: ### Deixando o elemento reutilizável Veja que agora temos uma única tag que podemos controlar a altura apenas mudando a sua largura. Mas para que o elemento seja realmente reutilizável, precisamos permitir que o desenvolvedor possa definir qual a proporção daquele elemento. Podemos aproveitar as variáveis CSS. Se você ainda não sabe como usá-las, eu mostro no nosso canal do YouTube no vídeo [Variáveis com CSS puro](https://youtu.be/5kb4bEilih8 "Variáveis com CSS puro"). Vamos criar uma variável CSS que vai indicar qual a proporção que deve ser mantida. Vamos chamar de `aspect-ratio` e colocar diretamente na tag. Vamos supor que queremos a mesma proporção de telas widescreen, que é 16:9. Vamos criar a variável com o valor `16/9`. Assim poderemos utilizar este valor com a função `calc()` para calcular a porcentagem, afinal é mais simples de entender `16/9` do que `56.26%`, não é mesmo? ```html ``` E o nosso novo padding-bottom está no exemplo abaixo: ### Simplificando ainda mais o HTML O nosso elemento com dimensões proporcionais está pronto. Temos um CSS simples e para utilizar basta criar um elemento com a classe `box-content` e colocar uma variável `aspect-ratio` para definir a proporção. Se quiser, você pode parar por aqui mesmo. Mas se precisamos definir a variável de controle de proporção, não seria mais simples definir estes estilos simplesmente para elementos que possuem essa variável, nos poupando do trabalho de ter que colocar a classe `box-content`? Podemos fazer isso apenas alterando os seletores. Vamos trocar o seletor `.box-content` por `[style*="--aspect-ratio"]`. Esse seletor basicamente está indicando para pegar os elementos que possuem `--aspect-ratio` em alguma parte dentro do atributo `style`. Veja como nosso HTML ficará bem mais simples: ```html ``` E nosso CSS: Agora você tem um container reutilizável que mantém a proporção entre largura e altura. Para deixá-lo responsivo, basta deixar seu `width` como `100%`. Assim ele mudará de tamanho de acordo com o seu elemento pai. - [ #CSS ](https://www.treinaweb.com.br/blog/tag/css) - [ #Aspect Ratio ](https://www.treinaweb.com.br/blog/tag/aspect-ratio) - [ #Altura automática ](https://www.treinaweb.com.br/blog/tag/altura-automatica) - [ #Proporções com CSS ](https://www.treinaweb.com.br/blog/tag/proporcoes-com-css) Autor ![Akira Hanashiro](//secure.gravatar.com/avatar/d107ca73135bc62770a67ebbfe4cf80d?d=mm) ## Akira Hanashiro Graduado em Análise e Desenvolvimento de Sistemas, Pós-graduado em Projetos e Desenvolvimento de Aplicações Web e MBA em Machine Learning. Especializado em Front End e curte desenvolvimento de jogos. [Todos os artigos](https://www.treinaweb.com.br/blog/autor/akira-hanashiro) ## Continue estudando Transforme leitura em prática com os cursos e formações da TreinaWeb. [Ver cursos](https://www.treinaweb.com.br/cursos) Continue lendo ## Artigos relacionados - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/02/vs-code-melhores-extensoes-para-front-end-400x280.png) [ Ferramentas ](https://www.treinaweb.com.br/blog/categoria/ferramentas) 6 anos atrás ## [ VS Code - Melhores extensões para Front End - Parte 3 ](https://www.treinaweb.com.br/blog/vs-code-melhores-extensoes-para-front-end-parte-3) Conheça mais uma lista de extensões do VS Code que ajudarão a melhorar a sua produtividade e facilitar o seu trabalho. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/06/como-fazer-animacoes-infinitas-de-fundo-com-css-puro-400x280.png) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 6 anos atrás ## [ Como fazer animação infinita de fundo com CSS? ](https://www.treinaweb.com.br/blog/como-fazer-animacao-infinita-de-fundo-com-css) Veja como criar uma animação infinita de fundo com efeito parallax usando apenas CSS puro. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/01/07102001/CSS-Box-Model-400x280.png) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 7 anos atrás ## [ CSS - Definindo o cálculo de dimensões com box-sizing ](https://www.treinaweb.com.br/blog/css-definindo-o-calculo-de-dimensoes-com-box-sizing) Aprenda a definir como o CSS calcula as dimensões dos seus elementos e evite que seu layout quebre inesperadamente. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/05/float-css-400x280.png) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 10 anos atrás ## [ CSS: Float vs Inline Block - Qual usar em meus layouts? ](https://www.treinaweb.com.br/blog/css-float-vs-inline-block-qual-usar-em-meus-layouts) Você sabe quando utilizar "float" e "display: inline-block"? Veja as características de cada um e aprenda a aplicá-los em seus projetos. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/09/05155045/Flip-Cards-400x280.png) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 7 anos atrás ## [ CSS: Aprenda a Criar o Efeito de Flip Cards ](https://www.treinaweb.com.br/blog/css-aprenda-a-criar-o-efeito-de-flip-cards) Aprenda a criar o efeito de Flip Cards com CSS puro de maneira bem simples. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/04/01182054/0-400x280.png) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 8 anos atrás ## [ CSS Grid – Um Guia Interativo (Parte 1 – Containers) ](https://www.treinaweb.com.br/blog/css-grid-um-guia-interativo-parte-1-containers) Aprenda definitivamente a trabalhar com CSS Grid com este Guia Interativo para facilitar o seu trabalho na construção de layouts com CSS. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2024/03/CSS-SHORTHAND-400x280.jpg) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 3 anos atrás ## [ Entendendo o shorthand no CSS ](https://www.treinaweb.com.br/blog/entendendo-o-shorthand-no-css) Vamos aprender o que é shorthand no CSS, entender o conceito e aprender a deixar nossos estilos mais limpo e de fácil manutenção Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/06/GUIA-CSS-400x280.jpg) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 3 anos atrás ## [ Guia da linguagem CSS ](https://www.treinaweb.com.br/blog/guia-da-linguagem-css) Nesse guia completo veremos como funciona e quais as formas de criar estilizações com CSS, necessário para qualquer desenvolvedor front-end Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/09/pixel_fisico_pixel_css-400x280.jpg) [ Sem categoria ](https://www.treinaweb.com.br/blog/categoria/sem-categoria) 4 anos atrás ## [ Pixel físico e pixel CSS ](https://www.treinaweb.com.br/blog/pixel-fisico-e-pixel-css) Nesse artigo você irá entender ao certo, a diferença entre esses dois tipos de pixels, e o que isso impacta no desenvolvimento Front end. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/12/06113144/css-sprites-400x280.png) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 8 anos atrás ## [ Trabalhando com Sprites no CSS ](https://www.treinaweb.com.br/blog/trabalhando-com-sprites-no-css) Veja como trabalhar com sprites no CSS. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/01/11142804/unnamed-400x280.png) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 9 anos atrás ## [ Efeito Parallax apenas com CSS ](https://www.treinaweb.com.br/blog/efeito-parallax-apenas-com-css) Veja nesse artigo como criar o efeito Parallax utilizando apenas CSS. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/05/grid-layout-400x280.png) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 10 anos atrás ## [ Começando com o novo CSS Grid Layout ](https://www.treinaweb.com.br/blog/comecando-com-o-novo-css-grid-layout) Aprenda um pouco mais sobre o CSS Grid Layout, agora com suporte completo pelo Firefox e Chrome. Ler artigo ## Um ano de acesso total para você viver de programação. Todos os cursos e formações da TreinaWeb numa única assinatura, com professores que atuam no mercado, suporte direto e certificados. Do primeiro `console.log` ao mercado de trabalho. - **1 ano** de acesso a **todos os cursos** - Cursos novos **toda semana** - Suporte **direto com professores** - Plano de carreira **personalizado** - **Certificados digitais** inclusos - **Aplicativos** para Android e iOS, com **acesso offline** **Garantia incondicional de satisfação** Teste por 7 dias e, se não fizer sentido para você, devolvemos seu dinheiro. ### Acesso completo a todos os cursos e dezenas de Formações. 12 meses Economize R$ 840,00 54% OFF de 12x R$ 129,00 por apenas 12x R$ 59,00 sem juros no cartão de crédito ou R$ 599,00 à vista Oferta termina em **03h 46min 24s** - Acesso imediato e ilimitado durante 1 ano. - Plano de carreira personalizado. - Suporte direto com professores. - E muito mais! [Matricule-se agora](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Escola online de programação, tecnologia e IA. - [ ](https://www.facebook.com/TreinaWeb/) - [ ](https://www.instagram.com/treinaweb/) - [ ](https://www.youtube.com/user/TreinaWeb) - [ ](https://twitter.com/treinaweb) - [ ](https://www.linkedin.com/company/treinaweb) - [ ](https://github.com/treinaweb) ## Inscreva-se em nossa newsletter Receba lançamentos, promoções e novidades. Seu nome Seu WhatsApp Seu melhor e-mail Inscrever-se ## Cursos - [ Base para Devs ](https://www.treinaweb.com.br/categoria/base-para-devs) - [ Front-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-front-end) - [ Back-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-back-end) - [ Mobile ](https://www.treinaweb.com.br/categoria/desenvolvimento-mobile) - [ Bancos de Dados ](https://www.treinaweb.com.br/categoria/bancos-de-dados) - [ Cloud ](https://www.treinaweb.com.br/categoria/cloud-computing) - [ IA ](https://www.treinaweb.com.br/categoria/ia) - [ E mais ](https://www.treinaweb.com.br/categoria/e-mais) - [ Ver todos os cursos ](https://www.treinaweb.com.br/cursos) ## Conteúdo - [ Formações ](https://www.treinaweb.com.br/formacoes) - [ Projetos práticos ](https://www.treinaweb.com.br/projetos-praticos) - [ Direto ao ponto ](https://www.treinaweb.com.br/direto-ao-ponto) - [ Planos ](https://www.treinaweb.com.br#assinatura) - [ Depoimentos ](https://www.treinaweb.com.br#depoimentos) - [ Comunidade ](https://www.treinaweb.com.br#comunidade) - [ Corpo docente ](https://www.treinaweb.com.br#docente) ## A empresa - [ Sobre a TreinaWeb ](https://www.treinaweb.com.br#sobre) - [ Perguntas frequentes ](https://www.treinaweb.com.br#faq) - [ Vantagens de estudar na TreinaWeb ](https://www.treinaweb.com.br/vantagens-de-estudar-na-treinaweb) - [ Cursos para empresas ](https://www.treinaweb.com.br/empresas) - [ Sugira um novo curso ](https://www.treinaweb.com.br/sugerir-curso) - [ Trabalhe conosco ](https://www.treinaweb.com.br/trabalhe-conosco) - [ Artigos ](https://www.treinaweb.com.br/blog) - [ Desenvolvedores e agentes ](https://www.treinaweb.com.br/developers) - [ Contato ](https://www.treinaweb.com.br/contato) - [ Política de privacidade ](https://www.treinaweb.com.br/politica-de-privacidade) - [ Termos de uso ](https://www.treinaweb.com.br/termos-de-uso) ## Baixe nosso aplicativo [ Disponível na **App Store** ](https://apps.apple.com/us/app/treinaweb/id1322729447) [ Disponível no **Google Play** ](https://play.google.com/store/apps/details?id=br.com.treinaweb.mobile) Av. Paulista, 1765, Conj 71 e 72 · Bela Vista · São Paulo · SP · 01311-200 © 2004 – 2026 TreinaWeb Tecnologia LTDA · CNPJ 06.156.637/0001-58