Как заполнить div, но сохранить соотношение сторон для дочерних div - PullRequest
Новая
       19

Как заполнить div, но сохранить соотношение сторон для дочерних div

0 голосов
/ 28 мая 2019

У меня есть следующая страница, показывающая как HTML, так и CSS.Я хочу, чтобы пять кнопок слева (div id = button1..5) всегда были квадратными при любом соотношении сторон и разрешении экрана.Также я хочу, чтобы пять кнопок всегда заполняли средний блок (id = menu).На самом деле, я могу делать и то и другое, но не вместе!Последнее легко с Flex и первое, как вы можете видеть, я сделал в коде ниже.Я рассмотрел несколько примеров SO, в частности this один, но они не делают то, о чем я говорю.

Есть предложения?Примечание: желательно без Javascript ... 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
html, body {
    margin:0;
    padding:0;
}
#container {
    display:flex;
    flex-direction: column;
    background-color: #444;
    height:100vh;
    width:100%;
    margin:0;
    padding:0;
}
#top{
    background-color: #777;
    height:5%;
    width:100%;
    margin:0;
    padding:0;  
}
#main{
    background-color: #DDD;
    height:100%;
    width:100%; 
    margin:0;
    padding:0;
    align-items: stretch;
}
#menu{
    display:flex;
    flex-direction: column;
    background-color: #FFF;
    height:100%;
    width:10%;
    margin:0;
    padding:0;  
}
.buttons{
    display:inline-block;
    position:relative;
    height:0;
    margin:0;
    padding-bottom:100%;
}
#button1{background-color:blue; margin:2px 0 2px 0;}
#button2{background-color:green; margin:2px 0 2px 0;}
#button3{background-color:red; margin:2px 0 2px 0;}
#button4{background-color:black; margin:2px 0 2px 0;}
#button5{background-color:orange; margin:2px 0 2px 0;}
.img-container {
  justify-content: center;
  display: flex;
  flex-direction: row;
  overflow: hidden;
  padding:16px;
}
.img-container .img-to-fit {
  flex: 1;
  height: 100%;
}

.fill {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden
}
.fill img {
    flex-shrink: 0;
    min-width: 100%;
    min-height: 100%
}

#bottom {
    height:2%;
    display:flex;
}
#bottom1{background-color:blue;}
#bottom2{background-color:green;}
#bottom3{background-color:red;}
#bottom4{background-color:white;}
#bottom5{background-color:orange;}
.bottoms{
    height:100%;
    width:20%;
    margin:0;
    padding:0;
}
</style>
</head>

<body>
    <div id="container">
        <div id="top"/>
        <div id="main">
             <div id="menu">
                <div id="button1" class="buttons">
                     <div class="img-container">
                         <img class="img-to-fit" src="parcel.png" />
                     </div>         
                </div>
                <div id="button2" class="buttons"/>
                <div id="button3" class="buttons"/>
                <div id="button4" class="buttons"/>
                <div id="button5" class="buttons"/>
            </div>
        </div>
        <div id="bottom">
                <div id="bottom1" class="bottoms"/>
                <div id="bottom2" class="bottoms"/>
                <div id="bottom3" class="bottoms"/>
                <div id="bottom4" class="bottoms"/>
                <div id="bottom5" class="bottoms"/>
        </div>
    </div>
</body>
</html>

Ответы [ 2 ]

1 голос
/ 28 мая 2019

У вас уже есть квадратные кнопки.Вам не хватает ширины этих кнопок, но вы можете легко ее вычислить.

div #menu имеет высоту 100vh - 7%, это означает, что ваши кнопки должны иметь высоту (100vh - 7%) / 5.
Их высота равна их ширине, поэтому, если у них есть width: calc(93vh / 5), они заполнят высоту #menu.

Поэтому вы можете просто добавить #menu { width: calc(93vh / 5)}

Я бы тоже удалил #main { height: 100% }, это не нужно. 

html, body {
    margin:0;
    padding:0;
}
#container {
    display:flex;
    flex-direction: column;
    background-color: #444;
    height:100vh;
    width:100%;
    margin:0;
    padding:0;
}
#top{
    background-color: #777;
    height:5%;
    width:100%;
    margin:0;
    padding:0;  
}
#main{
    background-color: #DDD;
    /* height:100%; not needed */
    width:100%; 
    margin:0;
    padding:0;
    align-items: stretch;
}
#menu{
    display:flex;
    flex-direction: column;
    background-color: #FFF;
    height:100%;
    width: calc((93vh) / 5); // Width of the menu = Height of the menu divided by the number of buttons
    margin:0;
    padding:0;  
}
.buttons{
    display:block;
    position:relative;
    height:0;
    margin:0;
    padding-bottom:100%;
}
#button1{background-color:blue; margin:2px 0 2px 0;}
#button2{background-color:green; margin:2px 0 2px 0;}
#button3{background-color:red; margin:2px 0 2px 0;}
#button4{background-color:black; margin:2px 0 2px 0;}
#button5{background-color:orange; margin:2px 0 2px 0;}
.img-container {
  justify-content: center;
  display: flex;
  flex-direction: row;
  overflow: hidden;
  padding:16px;
}
.img-container .img-to-fit {
  flex: 1;
  height: 100%;
}

.fill {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden
}
.fill img {
    flex-shrink: 0;
    min-width: 100%;
    min-height: 100%
}


#bottom {
    height:2%;
    display:flex;
}
#bottom1{background-color:blue;}
#bottom2{background-color:green;}
#bottom3{background-color:red;}
#bottom4{background-color:white;}
#bottom5{background-color:orange;}
.bottoms{
    height:100%;
    width:20%;
    margin:0;
    padding:0;
}
<div id="container">
    <div id="top">
    </div>
    <div id="main">
        <div id="menu">
            <div id="button1" class="buttons">
                <div class="img-container">
                  <img class="img-to-fit" src="parcel.png" />
                </div>          
            </div>
            <div id="button2" class="buttons">

            </div>
            <div id="button3" class="buttons">

            </div>
            <div id="button4" class="buttons">

            </div>
            <div id="button5" class="buttons">

            </div>
        </div>
    </div>
    <div id="bottom">
            <div id="bottom1" class="bottoms">

            </div>
            <div id="bottom2" class="bottoms">

            </div>
            <div id="bottom3" class="bottoms">

            </div>
            <div id="bottom4" class="bottoms">

            </div>
            <div id="bottom5" class="bottoms">

            </div>
    </div>
</div>
0 голосов
/ 28 мая 2019

Попробуйте использовать https://css -tricks.com / aspect-ratio-boxes / с отступом в качестве контейнера.Сделайте содержимое с position: absolute, чтобы заполнить контейнер.Так всегда следует соблюдать пропорции.

...