Als ik een afbeelding alleen een percentage breedte of hoogte geef, zal het groeien/krimpen met behoud van de beeldverhouding, maar als ik hetzelfde effect wil met een ander element, is het dan mogelijk om de breedte en de hoogte aan elkaar te koppelen met een percentage ?
Antwoord 1, autoriteit 100%
U kunt dit doen met pure CSS; geen JavaScript nodig. Dit maakt gebruik van het (enigszins contra-intuïtieve) feit dat padding-toppercentages zijn relatief ten opzichte van de breedtevan het bevattende blok. Hier is een voorbeeld:
.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>Antwoord 2, autoriteit 8%
Het idee van Chris dwalen af, een andere optie is om pseudo-elementen te gebruiken, zodat je geen absoluut gepositioneerd intern element hoeft te gebruiken.
<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>
Ik heb hier een demo samengesteld: http://codepen.io/tcmulder/pen/ iqnDr
BEWERKEN:
Nu, afgezien van het idee van Isaac, is het in moderne browsers gemakkelijker om vw-eenheden te gebruiken om de beeldverhouding te forceren (hoewel ik vh niet ook zou gebruiken zoals hij doet, anders zal de beeldverhouding veranderen op basis van de hoogte van het venster).
Dus dit vereenvoudigt de zaken:
<style>
.square {
/* width within the parent (could use vw instead of course) */
width: 50%;
/* set aspect ratio */
height: 50vw;
}
</style>
<div class="square">
<h1>Square</h1>
<p>This div will maintain its aspect ratio.</p>
</div>
Ik heb hier een aangepaste demo samengesteld: https://codepen.io /tcmulder/pen/MdojRG?editors=1100
Je kunt ook max-height, max-width en/of min-height, min-width instellen als je niet wilt dat het belachelijk groot of klein wordt, aangezien het nu gebaseerd is op de breedte van de browser en niet op de container en zal onbeperkt groeien/krimpen.
Houd er rekening mee dat je de inhoud binnen het element ook kunt schalen als je de lettergrootte instelt op een vw-maat en alle ingewanden op em-maten, en hier is een demo daarvoor: https://codepen.io/tcmulder/pen/VBJqLV?editors=1100
Antwoord 3, autoriteit 6%
<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>
Het belangrijkste om op te merken is vw= viewport-breedte, en vh= viewport-hoogte
Antwoord 4
Dat is mijn oplossing
<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%;
}
Antwoord 5
(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');
});
Werkvoorbeeld: http://jsfiddle.net/QtftX/1/