Question

我在下面的页面中显示了HTML和CSS。我希望左侧的五个按钮（div id = button1..5）在任何纵横比和屏幕分辨率下都始终为正方形。另外，我希望五个按钮始终填充中间的div（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>

Answer 1

您已经具有方形按钮。您错过的是这些按钮的宽度，但是您可以轻松计算出它们。

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>

Answer 2

尝试将https://css-tricks.com/aspect-ratio-boxes/与填充一起用作容器。用position: absolute填充内容以填充容器。应该总是这样保持比例。

如何填充div但如何保持子div的长宽比

2 个答案: