Как сверстать квадратный див с размерами min(15vh, 12.5vw)?

Question

[Владимир]

Есть ли шанс без яваскрипта сверстать квадратный блок с размерами min(15vh, 12.5vw) ?

Comments

[Lynn «Кофеман»]

А в нём что-то должно быть?

[Антон Нагаец]

эммм может прямоугольный? 15vh, 12.5vw все-таки

[Владимир]

Антон Нагаец: Сторона квадрата 15vh если она не превышает 12.5vw

Answer 1

[Денис Инешин]

Вопрос не понятен, так что ли:

<div style="width: 12.5vw; height: 15vh;">
    test
</div>

Comments

[Владимир]

Сторона квадрата 15vh если она не превышает 12.5vw

Answer 2

[Lynn «Кофеман»]

dabblet.com/gist/6f6128be7c63d154d809d1d0c349e8d2
Ну, вот, например:

<div>
	<svg viewBox="0 0 1 1"></svg>
	<p>А что внутри?</p>
</div>

div {
	display: table-cell;
	box-shadow: 0 0 5px red;
	position: relative;
}

svg {
	display: block;
	width: 12.5vw;
	max-width: 15vh;
	visibility: hidden;
}

div p {
	position: absolute;
	margin: 0;
	padding: 10px;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	box-shadow: 0 0 5px blue inset;
}

Comments

[Владимир]

В результате пошел другим путем. При помощи медиаквери определяю ориентацию и если портретная, отталкиваюсь от ширины

[Lynn «Кофеман»]

Владимир: формально это не совсем то, что написано в исходной постановке

[Владимир]

Алексей Тен: Возможно, задача была уместить в подвал 6 квадратов, если ширина больше высоты, то размер определялся исходя из высоты, если высота больше ширины, то 6 квадратов могут и не войти, нужно подогнатьих размер так чтобы влезли по ширине

Answer 3

[Алексей Струков]

Сверстать можно, но при условии, что у вас монитор с соотношением сторон 15:12,5)

Answer 4

[Владимир]

Использовал медиаквери
media screen and (orientation:portrait)