css ancho igual que alto

Question 1

Me gustaría hacer el siguiente truco en mi archivo css para que (alto = ancho) sin configurar píxeles. Quiero hacer esto para que sea cual sea la resolución del navegador, tenga los mismos valores en estas dos dimensiones.

#test{
    height: 100%;
    width: (same as height);
}

Prefiero hacerlo con css y no con javascript.

Gracias de antemano.

Question 2

Esta es mi manera

  aspect-ratio: 1 / 1;
  height: 100%;

Ejemplo:

.my-container {
  width: 100%;
  height: 150px;
  background: black;
  padding: 20px
}

.my-element {
  background: #fff;
  aspect-ratio: 1 / 1;
  height: 100%;
}

<div class="my-container">
  <div class="my-element">Height = Width</div>
</div>

Question 3

La única forma CSS de hacer esto en este momento (AFAIK) es usar valores relacionados con la ventana gráfica (vh / vw)

El soporte no es excelente en este momento: http://caniuse.com/viewport-units pero aquí hay una demostración rápida

JSFiddle

CSS

.box {
    background-color: #00f;
    width: 50vw;
    height:50vw;
}

La caja responde pero siempre permanecerá cuadrada.

Puro % los valores no funcionarán como height:100% no es igual width:100% ya que se refieren a diferentes cosas siendo las dimensiones relevantes del padre.

Question 4

Otra opción es hacer relación de aspecto usando imagen comportamiento del elemento

Aquí uso SVG imagen y en línea con URL de datos para hacerlo más simple

Para describir la relación de aspecto deseada, puede usar viewBox atributo svg viewBox='0 0 width-ratio height-ratio'

Ejemplos:

html,
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
        "Ubuntu", "Cantarell", "Fira Sans",
        "Droid Sans", "Helvetica Neue", sans-serif;
    margin: 0;
    padding: 0;
}
body {
    margin: 1rem;
}

.row {
  padding: 8px 0px;
}

.block {
  display: inline-block;
  vertical-align: top;
  position: relative;
  margin-left: 8px;
  margin-right: 8px;
}

.block-content {
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  display: flex; 
  justify-content: center; 
  align-items: center;
}

.ratio--width-to-height {
  height: 100%; 
  width: auto;
}

.ratio--height-to-width {
  height: auto; 
  width: 100%;
}

<h1>
  Block aspect ratio with svg image
</h1>

<h2>
  width to height
</h2>

<div class="row">   
  <div class="block" style="background: lime; height: 120px;">
    <img class="ratio--width-to-height" 
    src="data:image/svg+xml;utf8,&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox='0 0 1 1'&gt;&lt;/svg&gt;">
    <div class="block-content">1 : 1</div>
  </div>

  <div class="block" style="background: cyan; height: 120px;">
    <img class="ratio--width-to-height" 
    src="data:image/svg+xml;utf8,&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox='0 0 2 1'&gt;&lt;/svg&gt;">
    <div class="block-content">2 : 1</div>
  </div>
  
  <div class="block" style="background: orange; height: 120px;">
    <img class="ratio--width-to-height" 
    src="data:image/svg+xml;utf8,&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox='0 0 1 1.25'&gt;&lt;/svg&gt;">
    <div class="block-content">1 : 1.25</div>
  </div>
</div>

<h2>
  height to width
</h2>

<div class="row">   
  <div class="block" style="background: lime; width: 120px;">
    <img class="ratio--height-to-width" 
    src="data:image/svg+xml;utf8,&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox='0 0 1 1'&gt;&lt;/svg&gt;">
    <div class="block-content">1 : 1</div>
  </div>

  <div class="block" style="background: cyan; width: 120px;">
    <img class="ratio--height-to-width" 
    src="data:image/svg+xml;utf8,&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox='0 0 2 1'&gt;&lt;/svg&gt;">
    <div class="block-content">2 : 1</div>
  </div>
  
  <div class="block" style="background: orange; width: 120px;">
    <img class="ratio--height-to-width" 
    src="data:image/svg+xml;utf8,&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox='0 0 1 1.25'&gt;&lt;/svg&gt;">
    <div class="block-content">1 : 1.25</div>
  </div>
</div>

Mismo ejemplo en codepen https://codepen.io/forceuser/pen/MMWBBx

Question 5

ancho máximo / altura máxima trabajó para mi:

Una imagen de tamaño definido se establece en un div (.box).

.parent {
       position: absolute;
}

.box {
    width: 100%;
    height: 100%;
}

.box img {
   max-width: 100%;
   max-height: 100%;
}

¿Ha sido útil esta solución?