Как сохранить соотношение сторон div [duplicate]
Я знаю, что это старый ответ, но для этого я использую datetime.utcfromtimestamp(). Он принимает количество секунд и возвращает datetime, который может быть отформатирован, как и любой другой datetime.
duration = datetime.utcfromtimestamp(end - begin)
print duration.strftime('%H:%M')
Пока вы остаетесь в правовых диапазонах для временных частей, это должно работать, т.е. он не возвращает 1234: 35, поскольку часы равны & lt; = 23.
5 ответов
Попробуйте, если это может вам помочь. (с отсутствием гибкости)
.outerdiv
{
background-color: lightblue;
height: 100px;
display: grid;
align-items: center;
}
.innerdiv
{
background-color: lightyellow;
height: 50%;
width: 50px;
margin:0 auto;
}
<div style="" class="outerdiv">
<div id="yellow" class="innerdiv"></div>
</div>
Если вы вращаетесь на 90 градусов, это возможно:)
- ширина и высота переменной родительского (и отношения)
- ребенка всегда на 50% выше, чем его родительский
- и квадрат
Он будет подходить к другому контенту, если он хочет из-за преобразования.
⇒ Codepen
.flex {
display: table-cell; /* allows "vertical" centering (not possible with flex/grid here because of the padding-top trick on child) */
width: 12rem;
height: 20rem;
vertical-align: middle; /* "vertical" centering */
transform: rotate(90deg) translateY(-50%); /* vertical becomes horizontal */
background-color: lightblue;
}
.flex.large {
height: 35rem;
}
.item {
width: 50%;
height: 0;
margin-left: 25%; /* "horizontal" centering */
padding-top: 50%; /* padding-top trick for a square */
background-color: lightyellow;
}<div class="flex">
<div class="item"></div>
</div>
<hr>
<div class="flex large">
<div class="item"></div>
</div>Я не думаю, что есть способ определить ширину, используя высоту (даже если мы можем сделать обратное, используя какой-то трюк, например padding), но идея состоит в том, чтобы полагаться на квадратное изображение, которое вы делаете невидимым для того, чтобы сохранить соотношение. Затем содержимое должно быть позиционировано:
#blue {
display: flex;
align-items: center;
justify-content:center;
height:80vh;
background: blue;
}
#yellow {
height: 50%;
background: yellow;
position:relative;
}
img {
max-height:100%;
visibility:hidden;
}
#yellow .content {
position:absolute;
top:0;
right:0;
left:0;
bottom:0;
}<div id="blue" >
<div id="yellow" >
<img src="https://picsum.photos/500/500?image=1069" >
<div class="content">Some content here</div>
</div>
</div>Но если высота синего фиксированного значения, лучше полагаться на CSS такая:
#blue {
display: flex;
align-items: center;
justify-content:center;
--h:80vh;
height:var(--h);
background: blue;
}
#yellow {
height: calc(var(--h) / 2);
width:calc(var(--h) / 2);
background: yellow;
position:relative;
}<div id="blue" >
<div id="yellow" >
<div class="content">Some content here</div>
</div>
</div>-
1это вроде как гениальный, так и трата в то же время ха-ха (из-за дополнительного вызова ресурса). Понимаю. я мог бы сделать с определением ширины вместо высоты, хотя, пока я могу держать ее квадратной, есть ли где-нибудь, где вы можете указать мне на трюк, который вы упомянули с дополнением? Впервые я об этом узнал. – George Avgoustis 26 June 2018 в 11:34
-
2@GeorgeAvgoustis Я обновляю другой пример;), но вы можете обратиться к этому: stackoverflow.com/questions/1495407/… – Temani Afif 26 June 2018 в 11:37
Аналогичный ответ на тот, который предоставлен Temani Afif, но с использованием svg вместо изображения (поэтому нет необходимости в дополнительном запросе).
Кроме того, легче адаптировать его к произвольным пропорциям
.container {
height: 150px;
background-color: lightblue;
display: flex;
align-items: center;
justify-content: center;
margin: 10px;
}
.aspectRatio {
display: grid;
background-color: yellow;
height: 50%;
}
.aspectRatio svg {
height: 100%;
border: solid 1px red;
animation: resize 1s infinite;
}
.aspectRatio > * {
grid-area: 1 / 1 / 2 / 2;
}
@keyframes resize {
from {height: 100%;}
to {height: 99.9%;}
}<div class="container">
<div class="aspectRatio">
<svg viewBox="0 0 1 1"></svg>
<div class="inner">square</div>
</div>
</div>
<div class="container">
<div class="aspectRatio">
<svg viewBox="0 0 4 3"></svg>
<div class="inner">ratio 4/3</div>
</div>
</div>-
1
-
2@TemaniAfif Я никогда не знал, почему, но это необходимо. Если вы этого не сделаете, иногда при изменении размера размеры не адаптируются. Попробуйте это ответить. изменить размер / сделать полную страницу несколько раз, и время от времени вы не получите квадрат. - пересчет не рассчитан нормально. Это старый трюк, но я никогда не видел объяснений, почему он работает – vals 26 June 2018 в 14:20
-
3ах вы также заметили это: p ... да, я вижу эту проблему, но это немного случайный и немного трудно заметить, если вы не играете с изменением размера, поэтому я никогда не беспокоился о себе, почему:) ... Итак давайте продолжим молчание, пока кто-нибудь не спросит, почему: p – Temani Afif 26 June 2018 в 14:24
Посмотрите, может ли это вам помочь,
.outer {
background-color: lightblue;
height: 100px; /* Change as per your requirement */
display: flex;
align-items: center;
justify-content: center;
max-width: 200px; /* You can Remove this */
}
.inner {
background-color: lightyellow;
height: 50%;
width: 50px;
}<div style="" class="outer">
<div id="yellow" class="inner">
</div>
</div>-
1Это работает и как я установил его прямо сейчас, но не динамичен, он принимает фиксированную высоту во внешнем. Я пытаюсь выяснить, есть ли решение, которое работает для любой высоты X – George Avgoustis 26 June 2018 в 11:30
-
2