Pflegen Sie das Seitenverhältnis eines div mit CSS
https://stackoverflow.com/questions/1495407
-
18-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianFrage
Ich möchte ein div schaffen, die ihre Breite / Höhe wie die Breitenänderungen des Fensters ändern können.
Gibt es CSS3 Regeln, die die Höhe entsprechend der Breite zu ändern erlauben würde, , während das Seitenverhältnis beibehalten
Ich weiß, ich kann über JavaScript dies tun, aber ich würde es vorziehen, nur mit CSS.
Lösung
nur ein Wrapper <div> mit einem Prozentwert für padding-bottom erstellen, wie folgt aus:
div {
width: 100%;
padding-bottom: 75%;
background: gold; /** <-- For the demo **/
}<div></div>
Es wird in einer Höhe mit <div> führt gleich 75% der Breite des Containers. (Ein 4: 3-Seitenverhältnis)
Dies beruht auf der Tatsache, dass für padding:
Der Prozentsatz wird in Bezug auf die Breite berechnet des erzeugten Box des umschließenden Block [...] (Quelle: w3.org , Hervorhebung von mir)
padding-bottom Werte für andere Seitenverhältnisse und 100% Breite:
aspect ratio | padding-bottom value
--------------|----------------------
16:9 | 56.25%
4:3 | 75%
3:2 | 66.66%
8:5 | 62.5%
Einlegen von Inhalt in der div:
Um das Seitenverhältnis des div zu halten und seinen Inhalt zu verhindern Recken, müssen Sie ein absolut positioniertes Kind hinzuzufügen und sie zu den Rändern der Umhüllung strecken mit:
div.stretchy-wrapper {
position: relative;
}
div.stretchy-wrapper > div {
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
}
Hier ist eine Demo und andere mehr in der Tiefe Demo
Andere Tipps
vw Einheiten:
Sie können vw Einheiten sowohl für den Einsatz der Breite und Höhe des Elements. Dies ermöglicht das Seitenverhältnis des Elements erhalten werden, bezogen auf die Darstellungsbreite.
vw: 1 / 100stel der Breite des Ansichtsfensters. [ MDN ]
Alternativ können Sie auch vh für Darstellungshöhe verwenden, oder sogar vmin / vmax die kleinere / größere der Ansichtsfenster Dimensionen (Diskussion zu verwenden hier ).
Beispiel: 1: 1 Seitenverhältnis
div {
width: 20vw;
height: 20vw;
background: gold;
}<div></div>
Für andere Seitenverhältnisse, können Sie die folgende Tabelle, um den Wert für die Höhe zu berechnen entsprechend die Breite des Elements:
aspect ratio | multiply width by
-----------------------------------
1:1 | 1
1:3 | 3
4:3 | 0.75
16:9 | 0.5625
Beispiel: 4x4-Raster aus quadratischen divs
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>
Hier ist ein Fiddle mit dieser Demo und hier ist eine Lösung a ansprechende Raster von Quadraten mit verticaly und horizontaly zentriert Inhalt .
Browser-Unterstützung für vh / vw Einheiten ist IE9 + finden Sie unter canIuse für weitere Informationen
Ich habe einen Weg gefunden, diese mit CSS zu tun, aber man muss vorsichtig sein, da sie in Abhängigkeit von der Strömung von Ihrer eigenen Website ändern können. Ich habe es um die Einbettung von Video mit einem konstanten Aspektverhältnis innerhalb eines Fluids Breite Teils meiner Website getan.
Sagen Sie bitte ein eingebettetes Video wie diese:
<object>
<param ... /><param ... />...
<embed src="..." ...</embed>
</object>
Sie könnten dann legen Sie das alles in einem div mit einem „Video“ -Klasse. Dieses Video Klasse wird wahrscheinlich das flüssige Element in Ihrer Website, so dass, von selbst, es keine direkten Höhe Einschränkungen, aber wenn Sie den Browser der Größe wird es in der Breite entsprechend den Fluss der Website ändern. Dies wäre das Element, das Sie wahrscheinlich versuchen, Ihre eingebetteten Videos in bekommen, während ein bestimmtes Seitenverhältnis des Videos beibehalten wird.
Um dies zu tun, habe ich ein Bild vor dem eingebetteten Objekt im „video“ Klasse div.
!!! Der wichtigste Teil ist, dass das Bild, um das richtige Seitenverhältnis hat Sie wollen zu halten. Stellen Sie außerdem sicher, dass die Größe des Bildes ist mindestens so groß wie der kleinste Sie das Video erwarten (oder was auch immer Sie die Aufrechterhaltung der A. R. von) zu auf der Anlage erhalten basiert. Dadurch wird alle möglichen Probleme in der Auflösung des Bildes zu vermeiden, wenn es Percentage-Größe angepasst ist. Zum Beispiel, wenn Sie wollen ein Seitenverhältnis von 3 zu erhalten: 2, nicht nur verwenden, um ein 3px von 2px Bild. Es kann unter Umständen arbeiten, aber ich habe es nicht getestet, und es wäre wahrscheinlich eine gute Idee zu vermeiden sein.
Sie sollten wahrscheinlich haben bereits eine minimale Breite, wie dies für Fluidelemente Ihrer Website definiert. Wenn nicht, ist es eine gute Idee, so zu tun, um Überschneidungen zu vermeiden Elemente Abhacken oder hat, wenn das Browserfenster zu klein wird. Es ist besser, eine Bildlaufleiste an einem gewissen Punkt zu haben. Die kleinste Breite eine Webseite bekommen soll, ist irgendwo um ~ 600px (einschließlich fester Breite Spalt), da Bildschirmauflösungen kommen nicht kleiner, wenn Sie mit Telefon-freundlichen Websites handeln. !!!
verwende ich einen völlig transparenten PNG, aber ich glaube nicht, dass es wirklich Ausmachen endet, wenn Sie es richtig machen. Wie folgt aus:
<div class="video">
<img class="maintainaspectratio" src="maintainaspectratio.png" />
<object>
<param ... /><param ... />...
<embed src="..." ...</embed>
</object>
</div>
Nun sollten Sie in der Lage sein, CSS hinzufügen ähnlich den folgenden:
div.video { ...; position: relative; }
div.video img.maintainaspectratio { width: 100%; }
div.video object { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; }
div.video embed {width: 100%; height: 100%; }
Stellen Sie sicher, dass Sie auch eine explizite Höhe oder Breite Erklärung innerhalb der Tags object und embed entfernen, die in der Regel mit Kopieren / Einfügen-Code einbetten kommen.
Die Art und Weise, hängt von den Eigenschaften Position des Video Klasse Element arbeitet und das Element, das Sie ein bestimmtes Seitenverhältnis beibehalten möchten, haben. Es nutzt die Art und Weise ein Bild der richtigen Seitenverhältnis beibehalten, wenn sie in einem Element der Größe verändert. Es erzählt, was sonst in Elemente Video Klasse Voll Vorteil der Immobilien durch das dynamische Bild zur Verfügung gestellt nehmen durch seine Breite / Höhe zu 100% des Video Klasse Elements zwingt durch das Bild eingestellt wird.
Ziemlich cool, oder?
Sie müssen mit ihm ein wenig herumspielen könnten, um es mit Ihrem eigenen Entwurf zu arbeiten, aber dies tatsächlich funktioniert überraschend gut für mich. Das allgemeine Konzept ist da.
zu Web_Designer Antwort hinzuzufügen, die <div> wird eine Höhe (ganz aus der unteren Polsterung) von 75% der Breite der es enthält Element . Hier ist eine gute Zusammenfassung: http://mattsnider.com/css-using-percent-for- margin-and-padding / . Ich bin mir nicht sicher, warum das so sein sollte, aber das ist, wie es ist.
Wenn Sie Ihre div wollen eine Breite andere als 100% sein, müssen Sie eine andere Verpackung div, an dem die Breite zu setzen:
div.ar-outer{
width: 60%; /* container; whatever width you want */
margin: 0 auto; /* centered if you like */
}
div.ar {
width:100%; /* 100% of width of container */
padding-bottom: 75%; /* 75% of width of container */
position:relative;
}
div.ar-inner {
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
}
habe ich etwas ähnliches wie Elliot Bild Trick mich vor kurzem zu ermöglichen CSS-Medienabfragen zu verwenden, um eine andere Logo-Datei je nach Geräteauflösung zu dienen, aber maßstäblich noch proportional als <img> natürlich tun würde (Ich habe das Logo als Hintergrundbild ein transparentes .png mit dem richtigen Seitenverhältnis). Aber Web_Designer Lösung würde mir eine HTTP-Anforderung speichern.
Elliot inspirierte mich zu dieser Lösung - dank:
aspectratio.png ist eine vollständig transparente PNG-Datei mit der Größe Ihres bevorzugten Aspekt-Verhältnis, in meinem Fall 30x10 Pixel.
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);
}
Bitte beachten Sie: background-size ist eine css3-Funktion, die mit dem Ziel-Browser möglicherweise nicht. Sie können die Interoperabilität prüfen (F. E. auf caniuse.com ).
Wie in angegeben hier auf w3schools.com und etwas in diesem wiederholten akzeptierte Antwort , padding Werte als Prozentwert (Hervorhebung von mir):
Gibt die Polsterung in Prozent der Breite des enthaltenden Elements
ergo ein korrektes Beispiel eines reaktions DIV, die ein 16 hält: Verhältnis 9 Aspekts ist wie folgt:
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>
gründend auf Ihren Lösungen, die ich einig Trick gemacht habe:
Wenn Sie es verwenden, Ihre HTML nur sein
<div data-keep-ratio="75%">
<div>Main content</div>
</div>
Um es auf diese Weise make zu verwenden: CSS:
*[data-keep-ratio] {
display: block;
width: 100%;
position: relative;
}
*[data-keep-ratio] > * {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
und js (jQuery)
$('*[data-keep-ratio]').each(function(){
var ratio = $(this).data('keep-ratio');
$(this).css('padding-bottom', ratio);
});
Und mit diesem gerade eingestellten attr data-keep-ratio auf Höhe / Breite und das ist es.
Sie können eine svg verwenden. Machen Sie den Behälter / Wrapper Position relativ, legen Sie die svg zuerst als staticly positioniert und setzen Sie dann absolut positioniert Inhalt (oben: 0; links: 0; rechts: 0; unten: 0;)
Beispiel mit 16: 9 Verhältnis:
image.svg: (kann in src inlined werden)
<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>
Beachten Sie, dass Inline-svg scheint nicht zu funktionieren, aber Sie können die svg urlencode und einbetten src-Attribut wie dies in img:
<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%;" />
Wie @ web-tiki bereits einen Weg zeigt vh / vw zu verwenden, ich brauche auch einen Weg, auf dem Bildschirm zu zentrieren, ist hier ein Snippet-Code für 09.16 Porträt.
.container {
width: 100vw;
height: calc(100vw * 16 / 9);
transform: translateY(calc((100vw * 16 / 9 - 100vh) / -2));
}
translateY halten dieses Zentrum auf dem Bildschirm. calc(100vw * 16 / 9) wird erwartet Höhe für 9 / 16.(100vw * 16 / 9 - 100vh) Überlaufhöhe ist, so nach oben ziehen overflow height/2 halten es Mitte auf dem Bildschirm.
Für Landschaft, und halten Sie 16: 9 , zeigen Sie verwenden
.container {
width: 100vw;
height: calc(100vw * 9 / 16);
transform: translateY(calc((100vw * 9 / 16 - 100vh) / -2));
}
Das Verhältnis 9/16 zu ändern zu erleichtern, keine Notwendigkeit zu vordefinierten 100:56.25 oder 100:75.If Sie wollen erste Höhe zu gewährleisten, sollten Sie die Breite und Höhe wechseln, z.B. height:100vh;width: calc(100vh * 9 / 16) für 09.16 Porträt.
Wenn Sie für unterschiedliche Bildschirmgröße angepasst möchten, können Sie auch Interesse
- Hintergrund-size Abdeckung / enthalten
- Über Stil ist ähnlich zu enthalten, hängt davon ab, Breite:. Höhe-Verhältnis
- objekt fit
- Abdeckung / enthalten für img / Video-Tag
-
@media (orientation: portrait)/@media (orientation: landscape)- Medien-Abfrage für
portrait/landscapedas Verhältnis zu ändern.
- Medien-Abfrage für
Dies ist eine Verbesserung gegenüber der akzeptierten Antwort:
- Verwendet Pseudo-Elemente anstelle von Wrapper-div-Tags
- Das Seitenverhältnis ist auf der Breite der Box statt auf der übergeordneten
- Die Box wird senkrecht dehnen, wenn der Inhalt größer wird
.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>
SCSS ist die beste Lösung in meinem Fall; mit einem Datenattribut:
[data-aspect-ratio] {
display: block;
max-width: 100%;
position: relative;
&:before {
content: '';
display: block;
}
> * {
display: block;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
}
[data-aspect-ratio="3:1"]:before {
padding-top: 33.33%;
}
[data-aspect-ratio="2:1"]:before {
padding-top: 50%;
}
[data-aspect-ratio="16:9"]:before {
padding-top: 56.25%;
}
[data-aspect-ratio="3:2"]:before {
padding-top: 66.66%;
}
[data-aspect-ratio="4:3"]:before {
padding-top: 75%;
}
[data-aspect-ratio="1:1"]:before {
padding-top: 100%;
}
[data-aspect-ratio="3:4"]:before {
padding-top: 133.33%;
}
[data-aspect-ratio="2:3"]:before {
padding-top: 150%;
}
[data-aspect-ratio="9:16"]:before {
padding-top: 177.77%;
}
[data-aspect-ratio="1:2"]:before {
padding-top: 200%;
}
[data-aspect-ratio="1:3"]:before {
padding-top: 300%;
}
Zum Beispiel:
<div data-aspect-ratio="16:9"><iframe ...></iframe></div>
Nur eine Idee oder ein Hack.
div {
background-color: blue;
width: 10%;
transition: background-color 0.5s, width 0.5s;
font-size: 0;
}
div:hover {
width: 20%;
background-color: red;
}
img {
width: 100%;
height: auto;
visibility: hidden;
}<div>
<!-- use an image with target aspect ratio. sample is a square -->
<img src="http://i.imgur.com/9OPnZNk.png" />
</div>
können sagen, Sie haben 2 divs die outher div ist ein Behälter und die innere jedes Element sein könnte, die Sie brauchen, um sein Verhältnis (img oder youtube iframe oder was auch immer) zu halten
html sieht wie folgt aus:
<div class='container'>
<div class='element'>
</div><!-- end of element -->
Sie können sagen, dass das Verhältnis des „Element“ zu halten, müssen
Verhältnis => 4: 1 oder 2: 1 ...
CSS sieht wie folgt aus
.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 */
}
padding wenn in% angegeben, die es auf Höhe Breite nicht berechnet. .. so dass im Grunde hat man es egal, was Ihre Breite es Höhe wird immer auf Basis davon berechnet werden. was das Verhältnis zu halten.
Während die meisten Antworten sind sehr cool, die meisten von ihnen verlangen, bereits ein Bild richtig bemessen haben ... Andere Lösungen nur für eine Breite arbeiten und kümmern sich nicht von der Höhe zur Verfügung, aber manchmal will man die Inhalte in einer passen bestimmte Höhe zu.
ich Paar versucht habe sie zusammen eine vollständig tragbare und wieder ansehnliche Lösung zu bringen ... Der Trick ist, die automatische Skalierung eines Bildes zu verwenden, aber ein Inline-svg Element anstelle der Verwendung eines vorgerenderten Bildes verwenden oder jede Form der zweiten HTTP-Anforderung ...
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>
Beachten Sie, dass ich große Werte in der Breite verwendet habe und Höhenattribute des SVG, wie es die maximal zu erwartenden Größe größer sein muss als wie es nur schrumpfen. Das Beispiel macht das Verhältnis 10 des div: 5
Wenn Sie auf Hoch- oder Queransicht, die einen Platz im Innern des Ansichtsfensters passen (so groß wie möglich, aber nichts kleben außen), Schalter zwischen der Verwendung von vw / vh auf Orientierung portrait / landscape:
@media (orientation:portrait ) {
.square {
width :100vw;
height:100vw;
}
}
@media (orientation:landscape) {
.square {
width :100vh;
height:100vh;
}
}
Ich stolperte über eine intelligente Lösung mit <svg> und display:grid.
Grid-Element können Sie den gleichen Raum mit zwei (oder mehr) Elemente besetzen, ohne dass zu spezifizieren, welche die Höhe einstellt. Was bedeutet, dass, aus dem Kasten heraus, die größer man das Verhältnis setzt.
Das heißt, Sie können es verwenden, wie wenn Sie den Inhalt wissen nie genug groß sein, das gesamte „Verhältnis“ zu füllen und Sie sind einfach nach einer Möglichkeit, den Inhalt in diesem Raum zu positionieren (dh es zentriert beiden Richtungen nutzen
display:flex; align-items:center; justify-content:center).
Es ist so ziemlich das gleiche wie ein transparentes <img> mit display:block und vorbestimmten Verhältnis, mit der Ausnahme der <svg> leichter und wesentlich leichter zu ändern (in Reaktion darauf, das Verhältnis zu ändern, sollten Sie müssen).
<div class="ratio">
<svg viewBox="0 0 1 1"></svg>
<div>
I'm square
</div>
</div>
.ratio {
display: grid;
}
.ratio > * {
grid-area: 1/1/1/1;
}
Alles, was Sie tun müssen, ist das <svg>s Verhältnis ändern:
-
<svg viewBox="0 0 4 3"></svg> -
<svg viewBox="0 0 16 9"></svg>
Sehen Sie es funktioniert:
.ratio {
display: grid;
}
.ratio > * {
grid-area: 1/1/1/1;
}
/* below code NOT needed for setting the ratio
* I just wanted to mark it visually
* and center contents
*/
.ratio div {
border: 1px solid red;
display: flex;
align-items: center;
justify-content: center;
}<div class="ratio">
<svg viewBox="0 0 7 1"></svg>
<div>
Fixed ratio 7:1
</div>
</div>
Wenn Sie eine Lösung benötigen, wo das Inhaltselement nicht erlaubt ist, das Verhältnis zu setzen, wenn es größer (mit Überlauf versteckt oder Auto), müssen Sie position:relative auf das Gitter und position:absolute; height:100%; overflow-y: auto; auf dem Inhalt setzen. Beispiel:
.ratio {
display: grid;
position: relative;
}
.ratio > * {
grid-area: 1/1/1/1;
}
.ratio > div {
height: 100%;
overflow-y: auto;
position: absolute;
/* the rest is not needed */
border: 1px solid red;
padding: 0 1rem;
}<div class="ratio">
<svg viewBox="0 0 7 1"></svg>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. A scelerisque purus semper eget. Sem nulla pharetra diam sit amet nisl suscipit adipiscing bibendum. A cras semper auctor neque vitae tempus quam pellentesque nec. Morbi enim nunc faucibus a pellentesque sit amet porttitor. Arcu odio ut sem nulla. Sed viverra ipsum nunc aliquet bibendum enim facilisis gravida neque. Cras tincidunt lobortis feugiat vivamus at augue eget. Laoreet sit amet cursus sit amet. Amet nulla facilisi morbi tempus iaculis urna id volutpat. Leo in vitae turpis massa sed elementum tempus egestas sed. Egestas integer eget aliquet nibh. Dolor sit amet consectetur adipiscing elit.
<p>Ut aliquam purus sit amet. Eget magna fermentum iaculis eu non diam phasellus vestibulum. Diam in arcu cursus euismod quis viverra nibh. Nullam vehicula ipsum a arcu cursus vitae congue. Vel orci porta non pulvinar neque laoreet suspendisse. At tellus at urna condimentum mattis pellentesque. Tristique senectus et netus et malesuada. Vel pretium lectus quam id leo in. Interdum velit euismod in pellentesque. Velit euismod in pellentesque massa placerat duis. Vitae suscipit tellus mauris a diam maecenas sed enim.
<p>Mauris a diam maecenas sed enim ut sem. In hendrerit gravida rutrum quisque. Amet dictum sit amet justo donec enim diam. Diam vulputate ut pharetra sit amet aliquam id. Urna porttitor rhoncus dolor purus non enim praesent. Purus in massa tempor nec feugiat nisl pretium. Sagittis vitae et leo duis ut. Facilisi nullam vehicula ipsum a arcu cursus vitae congue mauris. Volutpat odio facilisis mauris sit amet massa vitae tortor condimentum. Aliquam purus sit amet luctus venenatis lectus magna. Sit amet purus gravida quis blandit turpis. Enim eu turpis egestas pretium aenean. Consequat mauris nunc congue nisi. Nunc sed id semper risus in hendrerit gravida rutrum. Ante metus dictum at tempor. Blandit massa enim nec dui nunc mattis enim ut.
</div>
</div>
Ich möchte meine Lösung teilen, wo ich eine img-Tag ein bestimmtes Seitenverhältnis Füllung haben. Ich konnte nicht background verwenden, weil der Mangel an Unterstützung des CMS und ich würde nicht einen Stil-Tag zu verwenden, wie so bevorzugen: <img style="background:url(...)" />. Außerdem ist die Breite 100%, so dass es braucht nicht an einer festen Größe wie in einige der Lösungen festgelegt werden. Es wird darauf ansprechend Maßstab!
.wrapper {
width: 50%;
}
.image-container {
position: relative;
width: 100%;
}
.image-container::before {
content: "";
display: block;
}
.image-container img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.ratio-4-3::before {
padding-top: 75%;
}
.ratio-3-1::before {
padding-top: calc(100% / 3);
}
.ratio-2-1::before {
padding-top: 50%;
}<div class="wrapper"> <!-- Just to make things a bit smaller -->
<p>
Example of an 4:3 aspect ratio, filled by an image with an 1:1 ratio.
</p>
<div class="image-container ratio-4-3"> <!-- Lets go for a 4:3 aspect ratio -->
<img src="https://placekitten.com/1000/1000/" alt="Kittens!" />
</div>
<p>
Just place other block elements around it; it will work just fine.
</p>
</div>
Ich habe in dieser Frage laufen ziemlich einige Male, also machte ich eine JS Lösung für sie. Diese einstellen grundsätzlich die Höhe des DOMElement nach der Breite des Elements durch das Verhältnis Sie angeben. Man kann es benutzen, wie folgt:
<div ratio="4x3"></div>
Bitte beachten Sie, dass da sie die Höhe des Elements Einstellung sollte das Element entweder ein display:block oder display:inline-block sein.
Sagen Sie, dass Sie Breite zu halten: 100px und Höhe: 50px (das heißt, 2: 1) Genau das tun, diese Mathematik:
.pb-2to1 {
padding-bottom: calc(50 / 100 * 100%); // i.e., 2:1
}
Sie können den Fluss Layout (FWD) verwenden.
https://en.wikipedia.org/wiki/Adaptive_web_design
Es wird das Layout, es ist ein wenig komplex skalieren und pflegen, sondern ermöglicht eine Seite ohne dass die Taste Inhalt wie (RWD) zu ändern.
Es sieht aus wie reagiert, aber es ist die Skalierung. https://www.youtube.com/watch?v=xRcBMLI4jbg
Sie können die CSS Skalierungsformel finden Sie hier:
Ich habe eine neue Lösung.
.squares{
width: 30vw
height: 30vw
Zum Hauptseitenverhältnis
.aspect-ratio
width: 10vw
height: 10vh
Dies ist jedoch in Bezug auf das gesamte Ansichtsfenster. Also, wenn Sie einen div benötigen, die 30% der Darstellungsbreite ist, können Sie 30vw stattdessen verwenden, und da Sie die Breite wissen, Sie wiederverwenden in Höhe berechnet und vw Einheit.
Wenn die gesamte Behälterstruktur Prozentsatz basiert, würde dies das Standardverhalten, können Sie ein spezifischeres Beispiel nennen?
Im Folgenden finden Sie ein Beispiel dafür, was ich meine, wenn Sie Ihre gesamte übergeordnete Hierarchie wurde% bezogen, funktionieren würde jede Browser-Fenster Einstellung ohne zusätzliche js / css, ist dies keine Möglichkeit, mit Ihrem Layout?
<div style="width: 100%;">
<div style="width: 50%; margin: 0 auto;">Content</div>
</div>
