ナビのリストの高さを可変させたい

リストの高さを運動に合わせて縮小させたいのですが、うまくいきません。

list aのpaddingを％にするなど試みたのですが、高さが固定されてしまいます。メインビジュアルに合わせて高さを変えたいのですが、
どうすればよいでしょうか

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <title></title>
        <link rel="icon" type="images/png" href="">
        <meta name="" content="">
        <!-- CSS -->
        <link href="css/style.css" rel="stylesheet">
        <link href="css/reset.css" rel="stylesheet">
    </head>
    <body>
        <div id="index" class="inner">
            <header>
                <div class="page_title">
                    <p>PORTFOLIO</p>
                </div>
            </header>
            <main>
                <div class="g_nav">
                    <ul>
                        <li><a href="#index">index</a></li>
                        <li><a href="#personal">制作者</a></li>
                        <li><a href="#web_gallery">WEB制作</a></li>
                        <li><a href="#gallery">イラスト・漫画</a></li>
                        <li><a href="#contact">連絡</a></li>
                    </ul>
                </div>
                <div class="main_vs">
            
                    <img src="img/main.jpg">
                </div>
            </main>
        </div>
    </body>

@charset "UTF-8";
/* 共通 */
body{
    background-color: #6875FF;
}
header{
    background-color:#343399 ;
}
.inner{
    max-width: 1366px;
    margin: 0 auto;
}
li a{
    text-decoration: none;
    color: black;
}
img{
    max-width: 100%;
    min-width: 700px;
    height: auto;
}
/* index */
header{
    height: 100px;
}
.page_title{
    display: block;
    padding-left: 70%;
    
}
.page_title p{
    font-size: 4rem;
}
main{
    display: flex;
}
.g_nav ul{
    width: 300px;
    height: auto;
    background-color: cadetblue;
}
.g_nav ul li{
    padding-top: 20%;
    padding-bottom:20% ;
    text-align: center;

}
.g_nav ul li a{
    
    font-size: 2rem;
    
}

行動規範の内容に同意します

回答1件

ベストアンサー

画像の横幅が1280px、高さが720pxのとき、以下のようなソースコードで実現できると思います。
実際の画像のサイズを調べて、CSSの3箇所を書き換えてください。

画面幅が小さくなったとき、サイドバーの高さがたりなくなるので、overflow: auto;でサイドバー内をスクロールするようにしました。

/* 画面サイズが1366px以上のとき */
.g_nav {
    overflow: auto;
    flex: 0 0 300px; /* サイドバーの横幅を300pxで固定 */
    
    /* .innerに指定した横幅が1366pxである前提 */
    height: calc((1366px - 300px) * 720 / 1280);
    
    /* 画像に対して「min-width: 700px;」が指定されている前提 */
    min-height: calc(700px * 720 / 1280);
}

/* 画面サイズが1365px以下のとき */
@media screen and (max-width:1365px) {
    .g_nav {
        /* .innerの横幅 = 画面幅 (100vw) のとき */
        height: calc((100vw - 300px) * 720 / 1280);
    }
}

CodePenでやってみました。こちらもご参照ください。

補足:
「画像の元の高さ / 画像の元の横幅」で、画像の横幅に対する高さの割合が算出できます。

そのため、「画像のブラウザでの横幅 * (画像の元の高さ / 画像の元の横幅)」により、そのときのブラウザに表示した画像の高さが算出できるのですが、
この数字をサイドバーの高さに指定することで画像とサイドバーの高さを揃えることができます。

投稿2020/05/31 04:31

編集2020/05/31 05:04