texto - salto de linea html
Cambiar de forma sensible el tamaño del div manteniendo la relación de aspecto (5)
Esta pregunta ya tiene una respuesta aquí:
- Mantener la relación de aspecto de un div con CSS 21 respuestas
Cuando le doy a una imagen un porcentaje de ancho o alto, solo crecerá / disminuirá manteniendo su relación de aspecto, pero si quiero el mismo efecto con otro elemento, ¿es posible unir el ancho y el alto usando porcentaje?
Esa es mi solucion
<div class="main" style="width: 100%;">
<div class="container">
<div class="sizing"></div>
<div class="content"></div>
</div>
</div>
.main {
width: 100%;
}
.container {
width: 30%;
float: right;
position: relative;
}
.sizing {
width: 100%;
padding-bottom: 50%;
visibility: hidden;
}
.content {
width: 100%;
height: 100%;
background-color: red;
position: absolute;
margin-top: -50%;
}
Rechazando la idea de Chris, otra opción es usar pseudo elementos para que no necesite usar un elemento interno absolutamente posicionado.
<style>
.square {
/* width within the parent.
can be any percentage. */
width: 100%;
}
.square:before {
content: "";
float: left;
/* essentially the aspect ratio. 100% means the
div will remain 100% as tall as it is wide, or
square in other words. */
padding-bottom: 100%;
}
/* this is a clearfix. you can use whatever
clearfix you usually use, add
overflow:hidden to the parent element,
or simply float the parent container. */
.square:after {
content: "";
display: table;
clear: both;
}
</style>
<div class="square">
<h1>Square</h1>
<p>This div will maintain its aspect ratio.</p>
</div>
He reunido una demostración aquí: http://codepen.io/tcmulder/pen/iqnDr
Puedes hacer esto usando CSS puro; no se necesita JavaScript. Esto utiliza el hecho (algo contradictorio) de que padding-top porcentajes de la padding-top son relativos al ancho del bloque contenedor . Aquí hay un ejemplo:
.wrapper {
width: 50%;
/* whatever width you want */
display: inline-block;
position: relative;
}
.wrapper:after {
padding-top: 56.25%;
/* 16:9 ratio */
display: block;
content: '''';
}
.main {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
/* fill parent */
background-color: deepskyblue;
/* let''s see it! */
color: white;
}
<div class="wrapper">
<div class="main">
This is your div with the specified aspect ratio.
</div>
</div>
<style>
#aspectRatio
{
position:fixed;
left:0px;
top:0px;
width:60vw;
height:40vw;
border:1px solid;
font-size:10vw;
}
</style>
<body>
<div id="aspectRatio">Aspect Ratio?</div>
</body>
La clave a tener en cuenta aquí es vw = viewport width, y vh = viewport height
(function( $ ) {
$.fn.keepRatio = function(which) {
var $this = $(this);
var w = $this.width();
var h = $this.height();
var ratio = w/h;
$(window).resize(function() {
switch(which) {
case ''width'':
var nh = $this.width() / ratio;
$this.css(''height'', nh + ''px'');
break;
case ''height'':
var nw = $this.height() * ratio;
$this.css(''width'', nw + ''px'');
break;
}
});
}
})( jQuery );
$(document).ready(function(){
$(''#foo'').keepRatio(''width'');
});
Ejemplo de trabajo: http://jsfiddle.net/QtftX/1/