html Manter a proporção de um div com CSS





10 Answers

unidades vw :

Você pode usar unidades vw para largura e altura do elemento. Isso permite que a proporção do elemento seja preservada, com base na largura da janela de visualização.

vw: 1 / 100th da largura da viewport. [ MDN ]

Alternativamente, você também pode usar o vh para a altura da viewport, ou até mesmo o vmin / vmax para usar a menor / maior das dimensões da viewport (discussão here ).

Exemplo: proporção de 1: 1

div {
  width: 20vw;
  height: 20vw;
  background: gold;
}
<div></div>

Para outras proporções, você pode usar a tabela a seguir para calcular o valor da altura de acordo com a largura do elemento:

aspect ratio  |  multiply width by
-----------------------------------
     1:1      |         1
     1:3      |         3
     4:3      |        0.75
    16:9      |       0.5625

Exemplo: grade 4x4 de divs quadrados

body {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
div {
  width: 23vw;
  height: 23vw;
  margin: 0.5vw auto;
  background: gold;
}
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>

Aqui está um violino com esta demo e aqui está uma solução para criar uma grade responsiva de quadrados com conteúdo centralizado verticalmente e horizontalmente .

O suporte do navegador para unidades vh / vw é o IE9 + consulte o site para mais informações

html css css3 responsive-design aspect-ratio

Eu quero criar um div que pode alterar sua largura / altura como a largura da janela muda.

Há alguma regra CSS3 que permita que a altura mude de acordo com a largura, mantendo sua proporção ?

Eu sei que posso fazer isso via JavaScript, mas eu prefiro usar apenas CSS.




Elliot me inspirou para esta solução - obrigado:

aspectratio.png é um arquivo PNG completamente transparente com o tamanho de sua proporção preferida, no meu caso 30x10 pixels.

HTML

<div class="eyecatcher">
  <img src="/img/aspectratio.png"/>
</div>

CSS3

.eyecatcher img {
  width: 100%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url(../img/autoresized-picture.jpg);
}

Observe: background-size é um recurso css3 que pode não funcionar com os navegadores de destino. Você pode verificar a interoperabilidade (fe on caniuse.com ).




Como dito aqui no w3schools.com e um pouco reiterado nesta resposta aceita , preencha valores como porcentagens (ênfase minha):

Especifica o preenchimento em porcentagem da largura do elemento contido

Ergo, um exemplo correto de um DIV responsivo que mantém uma proporção de 16: 9 é o seguinte:

CSS

.parent {
    position: relative;
    width: 100%;
}
.child {
    position: relative;
    padding-bottom: calc(100% * 9 / 16);
}
.child > div {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

HTML

<div class="parent">
    <div class="child">
        <div>Aspect is kept when resizing</div>
    </div>
</div>

Demo no JSFiddle




Você pode usar um svg. Torne a posição do container / wrapper relativa, coloque o svg primeiro como posicionado de forma estática e, em seguida, coloque o conteúdo posicionado absolutamente (top: 0; left: 0; right: 0; bottom: 0;)

Exemplo com proporções 16: 9:

image.svg: (pode ser embutido em src)

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 9" width="16" height="9"/>

CSS:

.container {
  position: relative;
}
.content {
  position: absolute;
  top:0; left:0; right:0; bottom:0;
}

HTML:

<div class="container">
  <img style="width: 100%" src="image.svg" />
  <div class="content"></div>
</div>

Note que o svg inline parece não funcionar, mas você pode urlencode o svg e o integra no atributo img src assim:

<img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%209%22%20width%3D%2216%22%20height%3D%229%22%2F%3E" style="width: 100%;" />



Esta é uma melhoria na resposta aceita:

  • Usa pseudo-elementos em vez de divs de wrapper
  • A proporção é baseada na largura da caixa, em vez de no pai
  • A caixa se estenderá verticalmente quando o conteúdo ficar mais alto

.box {
  margin-top: 1em;
  margin-bottom: 1em;
  background-color: #CCC;
}

.fixed-ar::before {
  content: "";
  float: left;
  width: 1px;
  margin-left: -1px;
}
.fixed-ar::after {
  content: "";
  display: table;
  clear: both;
}

.fixed-ar-16-9::before {
  padding-top: 56.25%;
}
.fixed-ar-3-2::before {
  padding-top: 66.66%;
}
.fixed-ar-4-3::before {
  padding-top: 75%;
}
.fixed-ar-1-1::before {
  padding-top: 100%;
}

.width-50 {
  display: inline-block;
  width: 50%;
}
.width-20 {
  display: inline-block;
  width: 20%;
}
<div class="box fixed-ar fixed-ar-16-9">16:9 full width</div>
<hr>
<div class="box fixed-ar fixed-ar-16-9 width-50">16:9</div>
<hr>
<div class="box fixed-ar fixed-ar-16-9 width-20">16:9</div>
<div class="box fixed-ar fixed-ar-3-2 width-20">3:2</div>
<div class="box fixed-ar fixed-ar-4-3 width-20">4:3</div>
<div class="box fixed-ar fixed-ar-1-1 width-20">1:1</div>
<hr>
<div class="box fixed-ar fixed-ar-16-9 width-20">16:9</div>
<div class="box fixed-ar fixed-ar-16-9 width-50">16:9</div>




Vamos dizer que você tem 2 divs a div outher é um recipiente e o interior poderia ser qualquer elemento que você precisa para manter sua relação (img ou um iframe youtube ou qualquer outra coisa)

html parece com isso:

<div class='container'>
  <div class='element'>
  </div><!-- end of element -->

digamos que você precisa manter a proporção do "elemento"

proporção => 4 para 1 ou 2 para 1 ...

css se parece com isso

.container{
  position: relative;
  height: 0
  padding-bottom : 75% /* for 4 to 3 ratio */ 25% /* for 4 to 1 ratio ..*/

}

.element{
  width : 100%;
  height: 100%;
  position: absolute; 
  top : 0 ;
  bottom : 0 ;
  background : red; /* just for illustration */
}

preenchimento quando especificado em% é calculado com base na largura e não na altura. .. então, basicamente, você não importa qual a sua largura, a altura será sempre calculada com base nisso. qual manterá a relação.




Enquanto a maioria das respostas é muito legal, a maioria deles precisa ter uma imagem já dimensionada corretamente ... Outras soluções só funcionam por uma largura e não se importam com a altura disponível, mas às vezes você quer ajustar o conteúdo em uma certa altura também .

Eu tentei juntá-los para trazer uma solução totalmente portátil e redimensionável ... O truque é usar o escalonamento automático de uma imagem, mas usar um elemento svg embutido em vez de usar uma imagem pré-renderizada ou qualquer forma de segunda solicitação HTTP ...

div.holder{
  background-color:red;
  display:inline-block;
  height:100px;
  width:400px;
}
svg, img{
  background-color:blue;
  display:block;
  height:auto;
  width:auto;
  max-width:100%;
  max-height:100%;
}
.content_sizer{
  position:relative;
  display:inline-block;
  height:100%;
}
.content{
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  background-color:rgba(155,255,0,0.5);
}
<div class="holder">
  <div class="content_sizer">
    <svg width=10000 height=5000 />
    <div class="content">
    </div>
  </div>
</div>

Observe que usei valores grandes nos atributos de largura e altura do SVG, pois ele precisa ser maior que o tamanho máximo esperado, pois ele só pode ser reduzido. O exemplo faz a relação do div 10: 5




Se você quiser ajustar um quadrado dentro da janela de visualização na visualização vertical ou horizontal (o mais grande possível, mas nada do lado de fora), alterne entre usar vw / vh na orientação portrait / landscape :

@media (orientation:portrait ) {
  .square {
    width :100vw;
    height:100vw;
  }
} 
@media (orientation:landscape) {
  .square {
    width :100vh;
    height:100vh;
  }
} 



Digamos que você mantenha Largura: 100px e Altura: 50px (ou seja, 2: 1) Apenas faça isso:

.pb-2to1 {
  padding-bottom: calc(50 / 100 * 100%); // i.e., 2:1
}



Se toda a estrutura do contêiner fosse baseada em porcentagem, esse seria o comportamento padrão. Você poderia fornecer um exemplo mais específico?

Abaixo está um exemplo do que quero dizer, se toda a hierarquia dos seus pais foi baseada em%, qualquer ajuste de janela do navegador funcionaria sem qualquer js / css adicional, isso não é uma possibilidade com o seu layout?

<div style="width: 100%;">
   <div style="width: 50%; margin: 0 auto;">Content</div>
</div>



Related