画像の高さを反応容器内で反応させる

Question

高さを調整すると応答性の高い画像が表示されますが、高さを調整するとスクロールバーが表示されます。どのように高さでそれを応答するようにするには？ 背景イメージを作成せずに

Answer 1

あなたはこのようにそれを行うことができます。

* {margin:0;padding:0;box-sizing:border-box} /* recommended */ 
 

 
html, body { /* modified */ 
 
    width: 100%; 
 
    height: 100%; 
 
    background: #000; 
 
} 
 

 
.container { 
 
    position: fixed; 
 
    bottom: 20px; 
 
    left: 20px; 
 
} 
 

 
.menu { 
 
    position: relative; 
 
    /*max-height: calc(100vh - 50px);*/ 
 
    /*max-width: 100vw;*/ 
 
    background: #fff; 
 
    overflow: auto; 
 
    border: 2px solid black; 
 
} 
 

 
ul { 
 
    display: flex; 
 
    /*width: 100%;*/ 
 
    height: 40px; /* needs to be defined/adjust to your needs */ 
 
    list-style-type: none; 
 
    padding: 0 0 10px 0; 
 
    /*margin: 0;*/ 
 
} 
 

 
li { 
 
    display: flex; /* added */ 
 
    justify-content: center; /* added */ 
 
    align-items: center; /* added */ 
 
    flex: 1; /* modified */ 
 
    /*text-align: center;*/ 
 
    padding: 10px 0; 
 
    cursor: pointer; 
 
    background: rgba(0, 0, 0, 0.2); 
 
} 
 

 
li:hover { 
 
    /*flex: 1 1 100%;*/ 
 
    /*text-align: center; already used */ 
 
    /*padding: 10px 0; already used */ 
 
    /*cursor: pointer; already used */ 
 
    background: rgba(0, 0, 0, 0.1); 
 
} 
 

 
img { 
 
    display: block; /* recommended/removes the bottom margin/whitespace */ 
 
    max-width: 100%; /* modified/recommended: use images which are 350px (or whatever you want) wide by default */ 
 
    max-height: calc(100vh - 60px); /* mandatory/- the defined height of the ul which is 40px - bottom: 20px */ 
 
}

<div class="container"> 
 
    <div class="menu"> 
 
    <ul> 
 
     <li>1</li> 
 
     <li>2</li> 
 
     <li>3</li> 
 
    </ul> 
 
    <div> 
 
     <img src="http://3.bp.blogspot.com/_EqZzf-l7OCg/TNmdtcyGBZI/AAAAAAAAAD8/KD5Y23c24go/s1600/homer-simpson-1280x1024.jpg" alt=""> 
 
    </div> 
 
    </div> 
 
</div>

ポイントがimgのために定義されmax-height: 100vhから兄弟やその他の影響を与える要素の定義された高さを差し引くことです素子。どんなポジショニングも考慮する必要があります。それを行う方法は他にありません。