html - pantalla - hacer que un div se adapte al contenido

CSS: hacer div div anchura proporcional a la altura

Question

Esto es un poco difícil de explicar, pero: quiero un div de altura de respuesta ( height: 100% ) que escalará el ancho proporcional a la altura (no al revés).

Sé de este método que utiliza un corte padding-top para hacer que la altura sea proporcional al ancho, pero lo necesito para trabajar al revés. Habiendo dicho eso, no estoy muy interesado en el requisito adicional de elementos de posición absoluta para el contenido de ese método, así que me doy cuenta de que bien podría estar pidiendo la luna en un palo aquí.

Para ayudar a visualizar, aquí hay una imagen:

... y aquí hay un jsFiddle , que ilustra casi lo mismo.

Vale la pena señalar que ya estoy utilizando :before y :after pseudo-elementos para alinear verticalmente el contenido del cuadro que quiero escalar proporcionalmente.

Realmente, realmente disfrutaría no tener que volver a jQuery, solo porque habrá un requisito inherente para los controladores de cambio de tamaño y, en general, más depuración todo el año ... pero si esa es mi única opción, entonces fiat .

Answer 1

Basado en la respuesta de @kunkalabs (que es realmente inteligente), he encontrado una solución que le permite conservar el tamaño de fuente heredado.

HTML:

<div id=''rect''>
    <div id=''content''>Text</div>
</div>

CSS:

#rect {
    font-size: 1000%;
    height: 1em;
    width: 1em;
    position: relative;
}

#content {
    font-size: 10%;
}

Básicamente, el tamaño de fuente de #content es (100 / $ rectFontSize) * 100 por ciento del rectángulo. Si necesita un tamaño de píxel definido para el rectángulo, puede establecer el #rect de fuente principal de #rect ... de lo contrario, simplemente ajuste el tamaño de fuente hasta que sea sobre el lugar donde desea que esté (y enfurezca a su diseñador en el proceso).

Answer 2

Haga que el DIV principal se comporte como una celda de tabla y alinee el elemento secundario verticalmente. No hay necesidad de hacer ningún truco de relleno.

HTML

.parent { width:300px; height:300px; display:table-cell; vertical-align:middle; }

CSS

.parent { width:300px; height:300px; display:table-cell; vertical-align:middle; }

Answer 3

La solución tipográfica requiere que se conozca la altura. He encontrado una solución para hacer un elemento proporcional dentro de un div padre con anchos y alturas desconocidos. Aquí hay una demo .

El truco que estoy usando es tener una imagen usada como espaciador. El código explicado:

<div class="heightLimit">
 <img width="2048" height="2048" class="spacer"
  src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAA
       P///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">
 <div class="filler">
  <div class="proportional">
  </div>
 </div>
</div>

Así que no es lo más bonito con dos divs extra y una imagen inútil. Pero podría ser peor. El elemento de imagen debe tener ancho y alto con las dimensiones deseadas. El ancho y la altura deben ser tan grandes como el tamaño máximo permitido (¡una característica!).

El css:

.heightLimit {
 position: absolute;
 top: 0;
 left: 0;
 height: 100%;
 width: auto;
 max-width: 100%;
 overflow: hidden;
}

Este elemento es para limitar la altura, pero para expandir horizontalmente ( width: auto ), pero nunca más allá del padre ( max-width ). El desbordamiento debe estar oculto porque algunos niños sobresaldrán del div.

.spacer {
 width: auto;
 max-height: 100%;
 visibility: hidden;
}

Esta imagen es invisible y se escala proporcionalmente a la altura, mientras que el ancho se ajusta y obliga a que el ancho del padre también se ajuste.

.filler {
 position: absolute;
 top: 0;
 left: 0;
 bottom: 0;
 right: 0;
}

Este elemento es necesario para llenar el espacio con un contenedor absolutamente posicionado.

.proportional {
 position: relative;
 width: 100%;
 height: 0;
 padding-bottom: 100%;
}

Y aquí nuestro elemento proporcional obtiene una altura proporcional al ancho con el truco de relleno inferior familiar.

Desafortunadamente, hay un error en Chrome e IE, por lo que si modifica el elemento principal utilizando Javascript, como en mi demostración, las dimensiones no se actualizarán. Hay un truco que se puede aplicar para resolver eso, como se muestra en mi demostración.

Answer 4

Me he estado preguntando acerca de una solución pura-css para este problema por un tiempo. Finalmente se me ocurrió una solución utilizando ems, que se puede mejorar progresivamente utilizando vws:

Vea el enlace de codepen para una demostración y explicación completa de trabajo:

http://codepen.io/patrickkunka/pen/yxugb

Versión simplificada:

.parent {
  font-size: 250px; // height of container
  height: 1em;
}

.child {
  height: 100%;
  width: 1em; // 100% of height
}

Answer 5

Oh, probablemente podrías usar ese truco de "relleno superior".

width: 50%;
height: 0;
padding-bottom: 50%;

http://absolide.tumblr.com/post/7317210512/full-css-fluid-squares

O:

.square-box{
    position: relative;
    width: 50%;
    overflow: hidden;
    background: #4679BD;
}
.square-box:before{
    content: "";
    display: block;
    padding-top: 100%;
}

http://codeitdown.com/css-square-rectangle/

El relleno vertical en CSS está relacionado con el ancho del elemento, no con la altura.

Answer 6

Puede usar view height (vh) como la unidad para el ancho .

Aquí hay un ejemplo con el margen de 20px que solicitó.

<div class="parent">
<img src="foo.jpg" />
</div>

Vea el violín: https://jsfiddle.net/svobczp4/