divのコンテナと同じ高さの画像の高さを100％に設定できないのはなぜですか？

Question

divのコンテナと同じ高さの画像の高さを100％に設定できないのはなぜですか？

私がコードをテストしようとすると、このように表示されます。

https://i.imgur.com/Q1MGP0Z.png

私はこのような画像を表示したいです。クラス名img_lookスタイルheight: 100%;私はどうすればよいと

https://i.imgur.com/GeLUUCo.png

？

.li_look{ 
 
    padding: 0px; 
 
    margin: 0; 
 
    position: relative; 
 
    width: 25%; 
 
    border-right: 3px solid #fff; 
 
    margin-right: -3px; 
 
    z-index: 11; 
 
    float: left; 
 
    list-style: none; 
 
    color: #333; 
 
    font-size: 19px; 
 
    background: #fff; 
 
} 
 
.div_1{ 
 
    float: none; 
 
    margin: 0; 
 
    width: 100%; 
 
    height: 197.207px; 
 
    display: block; 
 
    position: relative; 
 
} 
 
.a_tag{ 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    height: 100%; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    overflow: hidden; 
 
    display: block; 
 
    cursor: pointer; 
 
} 
 
.div_2{ 
 
    transform: translateX(-50%); 
 
    left: 50%; 
 
    top: 0; 
 
    background-color: transparent; 
 
    display: block; 
 
    position: absolute; 
 
} 
 
.img_look{ 
 
    height: 100%; 
 
    display: block; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    max-width: unset; 
 

 
}

<ul> 
 
    <li class="li_look"> 
 
    <div class="div_1"> 
 
     <a href="#" class="a_tag"> 
 
     <div class="div_2"> 
 
      <img src="https://i2.wp.com/www.thisblogrules.com/wp-content/uploads/2010/02/man-and-bear-bath.jpg?resize=550%2C356" class="img_look"> 
 
     </div> 
 
     </a> 
 
    </div> 
 
    </li> 
 
</ul>

Answer 1

問題は、imgタグの親コンテナにあります。それに対して高さが定義されていないため、親コンテナに対して100％を使用することはできません。 .div_2のコードでは、以下のように高さを定義します。そしてそれは正常に動作します。

.li_look{ 
 
    padding: 0px; 
 
    margin: 0; 
 
    position: relative; 
 
    width: 25%; 
 
    border-right: 3px solid #fff; 
 
    margin-right: -3px; 
 
    z-index: 11; 
 
    float: left; 
 
    list-style: none; 
 
    color: #333; 
 
    font-size: 19px; 
 
    background: #fff; 
 
} 
 
.div_1{ 
 
    float: none; 
 
    margin: 0; 
 
    width: 100%; 
 
    height: 197.207px; 
 
    display: block; 
 
    position: relative; 
 
} 
 
.a_tag{ 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    height: 100%; 
 
    width:100%; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    overflow: hidden; 
 
    display: block; 
 
    cursor: pointer; 
 
} 
 
.div_2{ 
 
    transform: translateX(-50%); 
 
    left: 50%; 
 
    top: 0; 
 
    background-color: transparent; 
 
    display: block; 
 
    position: absolute; 
 
    height:100%; 
 
} 
 
.img_look{ 
 
    height: 100%; 
 
    display: block; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    max-width: unset; 
 

 
}

<ul> 
 
    <li class="li_look"> 
 
    <div class="div_1"> 
 
     <a href="#" class="a_tag"> 
 
     <div class="div_2"> 
 
      <img src="https://i2.wp.com/www.thisblogrules.com/wp-content/uploads/2010/02/man-and-bear-bath.jpg?resize=550%2C356" class="img_look"> 
 
     </div> 
 
     </a> 
 
    </div> 
 
    </li> 
 
</ul>

Answer 2

あなたのイメージは、あなたのdivと同じサイズですが、あなたのdivがそれを保持aタグと同じサイズではありません。 aにはoverflow:hidden;があるので、divが実際に大きくなっていることはわかりません。

height:100%;またはwidth:100%;をdivに追加するだけで、画像のサイズを同じに保つことはできません。

また、本当に間違っていると感じますか？

height: 197.207px; 

Answer 3

私はあなたがこのhttps://jsfiddle.net/wqhch5et/ビュー、フルスクリーンモードが必要だと思います。 位置を変更する必要があります：絶対;ポジションへ：固定; div_2で

.li_look{ 
 
    padding: 0px; 
 
    margin: 0; 
 
    position: relative; 
 
    width: 25%; 
 
    border-right: 3px solid #fff; 
 
    margin-right: -3px; 
 
    z-index: 11; 
 
    float: left; 
 
    list-style: none; 
 
    color: #333; 
 
    font-size: 19px; 
 
    background: #fff; 
 
} 
 
.div_1{ 
 
    float: none; 
 
    margin: 0; 
 
    width: 100%; 
 
    height: 197.207px; 
 
    display: block; 
 
    position: relative; 
 
} 
 
.a_tag{ 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    height: 100%; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    overflow: hidden; 
 
    display: block; 
 
    cursor: pointer; 
 
} 
 
.div_2{ 
 
    transform: translateX(-50%); 
 
    left: 50%; 
 
    top: 0; 
 
    background-color: transparent; 
 
    display: block; 
 
    position: fixed; 
 
} 
 
.img_look{ 
 
    height: 100%; 
 
    display: block; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    max-width: unset; 
 

 
}

<ul> 
 
    <li class="li_look"> 
 
    <div class="div_1"> 
 
     <a href="#" class="a_tag"> 
 
     <div class="div_2"> 
 
      <img src="https://i2.wp.com/www.thisblogrules.com/wp-content/uploads/2010/02/man-and-bear-bath.jpg?resize=550%2C356" class="img_look"> 
 
     </div> 
 
     </a> 
 
    </div> 
 
    </li> 
 
</ul>