Ширина установки в зависимости от высоты

Я видел решение для высоты в зависимости от ширины: css height same as width. Или здесь: https://stackoverflow.com/a/6615994/2256981. Но мой вопрос противоположный.Ширина установки в зависимости от высоты

Мой элемент:

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

Стиль для нее:

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. */ 
}

Сценарий, который держит его квадрат:

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

Полный код здесь: http://jsfiddle.net/je1h/hxkgfr9g/

вопросзаключается в том, чтобы сделать то же самое в чистом CSS. Нет сценариев.

источник

2015-04-16 jevgenij

Я не знаю, можете ли вы сделать это в css. Вы можете попробовать https://css-tricks.com/snippets/css/a-guide-to-flexbox/, но я не знаю, поможет ли это вам. – xdhmoore

Это делает то, что вы ищете? http://stackoverflow.com/questions/12899031/css-squares-on-resize – xdhmoore

Я также думаю, что это невозможно в чистом CSS, много раз пробовали ... Нам придется подождать, прежде чем стилизовать динамические совершенные квадраты! Единственный вариант, который я вижу, это Javascript, как вы на самом деле писали. – Sebastien

Есть два Методики Я в курсе, чтобы сохранить пропорции элемента в соответствии с его высота:

Когда высоты относительно окна просмотра:

Вы можете использовать Vh единица:

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

<div></div>

Для высоты на основе высоты родительского элемента:

Вы можете использовать фиктивный образ, который имеет соотношение сторон вы хотите. Пример с 1: соотношением сторон 1 можно использовать 1 * 1 прозрачный .png изображение или как прокомментированы @vlgalik с 1 * 1 base64 закодированный 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>

Заметим, что это последнее демо не обновляется при изменении размера окна. Но соотношение сторон сохраняется на странице загрузки

UPDATE:
Как сообщили в the comments установки display:inline-flex: на #el кажется решить обновление по проблеме изменения размеров окна.

источник

2015-04-16 14:47:00

Или вы можете использовать Base64 Encoded 1x1px прозрачный GIF или встроенный SVG (но есть некоторые проблемы в FF и более старых браузерах с SVG). – vlgalik

@ vlgalik nice, я обновил ответ. –

Спасибо за ваш ответ. Это забавный хак, и, честно говоря, мне не удалось полностью понять, как это работает :) Почему нам нужно «#wrap», если быть точным. И, как вы утверждаете, к сожалению, он не обновляет ширину '#' на размер окна. – jevgenij

Edit:. Пропустил, что вы хотите установить ширину в зависимости от высоты, это делает противоположные :(

Для поддержки всех коэффициентов можно использовать padding-bottom Проценты в отступе дне всегда по отношению к ширине элемента:

/* 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>

Единственным недостатком является то, что вам нужна куча элементов обертки.

источник

2015-04-16 15:05:03 darthmaim

Мы находим ширину в зависимости от высоты, а не высоты в соответствии с шириной. – JulianSoto

Ширина установки в зависимости от высоты

ответ

Смежные вопросы