Ustaw szerokość zgodnie z wysokością

Widziałem rozwiązanie dla wysokości w zależności od szerokości: css height same as width. Lub tutaj: https://stackoverflow.com/a/6615994/2256981. Ale moje pytanie jest przeciwne.Ustaw szerokość zgodnie z wysokością

mój żywioł:

<body> 
    <div id="square"></div> 
</body>

Style dla niego:

body, html { 
    margin: 0; 
    height: 100%; 
    min-height: 300px; 
    position: relative; 
} 
div#square { /* My square. */ 
    height: 75%; /* It's height depends on ancestor's height. */ 
    width: 75vh; /* If supported, preliminarily sets it's width. */ 
    position: absolute; /* Centers it. */ 
    left: 50%; top: 50%; transform: translate(-50%, -50%); 
    background-color: darkorange; /* Makes it visible. */ 
}

Script, który utrzymuje ją kwadrat:

window.onload = window.onresize = function (event) { 
    var mySquare = document.getElementById("square"); 
    mySquare.style.width = mySquare.offsetHeight + 'px'; 
};

Kompletny kod tutaj: http://jsfiddle.net/je1h/hxkgfr9g/

Pytanie jest zrobić to samo w czystym CSS. Bez skryptów.

Źródło

2015-04-16 jevgenij

Nie wiem, czy można to zrobić w css. Możesz spróbować https://css-tricks.com/snippets/css/a-guide-to-flexbox/, ale nie wiem, czy to ci pomoże. – xdhmoore

Czy to robi to, czego szukasz? http://stackoverflow.com/questions/12899031/css-squares-on-resize – xdhmoore

Uważam też, że nie jest to możliwe w czystym CSS, próbowałem wiele razy ... Będziemy musieli poczekać przed stylizacją dynamicznych, idealnych kwadratów! Jedyną opcją którą widzę jest JavaScript, tak jak napisałeś. – Sebastien

Istnieją dwa techiques Jestem świadomy, aby utrzymać współczynnik kształtu elementu według swojego wysokość:

Kiedy wysokość względem rzutni:

Można używać jednostek vh:

div { 
 
    width: 75vh; 
 
    height: 75vh; 
 
    background:darkorange; 
 
}

<div></div>

Dla wysokości w oparciu o wysokość elementu nadrzędnego:

Można użyć manekina obrazu, który ma proporcje chcesz. Przykład o stosunku 1: 1 obrazu można użyć 1 * 1 przezroczysty obraz PNG lub skomentowane przez @vlgalik A 1 * 1 base64 zakodowany Gif:

html,body{ 
 
    height:100%; 
 
    margin:0; 
 
    padding:0; 
 
} 
 
#wrap{ 
 
    height:75%; 
 
} 
 
#el{ 
 
    display:inline-block; 
 
    height:100%; 
 
    background:darkorange; 
 
} 
 
#el img{ 
 
    display:block; 
 
    height:100%; 
 
    width:auto; 
 
}

<div id="wrap"> 
 
    <div id="el"> 
 
     <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"> 
 
    </div> 
 
</div>

zauważyć, że ten ostatnie demo nie aktualizuje się przy zmianie rozmiaru okna. Ale proporcje są przechowywane na stronie obciążenia

UPDATE:
Jak podano w the comments ustawienie display:inline-flex: na #el wydaje się rozwiązać problemu na aktualizację okno rozmiaru.

Źródło

2015-04-16 14:47:00

Lub możesz użyć Base64 Encoded 1x1px przezroczysty GIF lub wbudowany SVG (ale są pewne problemy w FF i starszych przeglądarkach z SVG). – vlgalik

@vlgalik ładny, zaktualizowałem odpowiedź. –

Dzięki za odpowiedź. To zabawny hack i szczerze mówiąc, nie udało mi się w pełni zrozumieć, jak to działa. Dlaczego potrzebujemy "#wrap", żeby być precyzyjnym. A kiedy już to robisz, niestety nie aktualizuje "#el" szerokości przy zmianie rozmiaru okna. – jevgenij

Edit. Nieodebrane że chcesz ustawić szerokość w zależności od wysokości, to nie odwrotnie :(

na wsparcie dla wszystkich wskaźników można użyć padding-bottom Procenty w padding-bottom są zawsze w stosunku do szerokości elementu:

/* the wrapper has a width */ 
 
.wrapper { 
 
    position: relative; 
 
    width: 25%; 
 
    margin-bottom: 10px; 
 
} 
 
/* these elements set the height (using padding-bottom) */ 
 
.square { 
 
    padding-bottom: 100%; 
 
    position: relative; 
 
} 
 
.widescreen { 
 
    padding-bottom: 56.25%; /* 9/16 = 0.5625 */ 
 
} 
 

 
/* 
 
* This is the content. 
 
* Needs position:absolute to not add to the width of the parent 
 
*/ 
 
.content { 
 
    /* fill parent */ 
 
    position: absolute; 
 
    top: 0; bottom: 0; 
 
    left: 0; right: 0; 
 
    
 
    /* visual */ 
 
    padding: 10px; 
 
    background: orange; 
 
    color: white; 
 
}

<div class="wrapper"> 
 
    <div class="square"> 
 
    <div class="content">square</div> 
 
    </div> 
 
</div> 
 

 
<div class="wrapper"> 
 
    <div class="widescreen"> 
 
    <div class="content">16:9 ratio</div> 
 
    </div> 
 
</div>

Jedynym minusem jest to, że potrzebujesz wielu elementów opakowania.

Źródło

2015-04-16 15:05:03 darthmaim

Znajdujemy dla szerokości według wysokości, a nie wysokości według szerokości. – JulianSoto

Ustaw szerokość zgodnie z wysokością

Odpowiedz

Powiązane problemy