イメージの下にテキストを置く方がいいですか？

Question

私はこれを理解するのに苦労しました。私が最初に絵の下にテキストを残そうとしたとき、それは常にfloatだった。このコードはうまくいくようですが、私は何かが間違っていたと思います。.resmontage ulの幅を70%から60%に変更すると、すべての画像が小さくなります。最初に指定したwidthまたはheightには存在しません。

.resmontage img〜width: 100%を.resmontage liとするにはどうしてですか？もし私がresmontage liから幅を取り除くと、すべてが壊れてしまいます！私はあなたがブートストラップを使うことができることを知っていますが、私はそれを自分でやることを好む。

#bt { 
 
    color: white; 
 
    margin-top: 1%; 
 
    margin-left: -8%; 
 
} 
 
.resmontage ul { 
 
    float: left; 
 
    background-color: black; 
 
    width: 70%; 
 
    height: 25%; 
 
    padding-left: 7%; 
 
    margin-top: 1%; 
 
    border-radius: 1%; 
 
} 
 
.resmontage li { 
 
    list-style-type: none; 
 
    width: 20%; 
 
    margin-top: 1%; 
 
    float: left; 
 
    padding-right: 3%; 
 
} 
 
.resmontage img { 
 
    width: 100%; 
 
    height: 65%; 
 
} 
 
.hello { 
 
    text-align: center; 
 
    color: white; 
 
    margin-top: 2%; 
 
} 
 
.clearfix:after { 
 
    content: ""; 
 
    display: both; 
 
    clear: both; 
 
}

<div class="resmontage clearfix"> 
 
    <ul> 
 
    <div id="bt">Games that will be released next month.</div> 
 
    <li> 
 
     <img src="https://upload.wikimedia.org/wikipedia/en/a/a5/Grand_Theft_Auto_V.png" /> 
 
     <div class="hello">Gta v</div> 
 
    </li> 
 

 
    <li> 
 
     <img src="http://media.steampowered.com/apps/valvestore/images/slider/store_image_02.png" /> 
 
     <div class="hello">CSGO</div> 
 
    </li> 
 

 
    <li> 
 
     <img src="https://upload.wikimedia.org/wikipedia/commons/e/e0/Rocket_League_coverart.jpg" /> 
 
     <div class="hello">Rocket League</div> 
 
    </li> 
 

 
    <li> 
 
     <img src="http://blogs-images.forbes.com/erikkain/files/2014/12/The-Witcher-3-Wild-Hunt.jpg" /> 
 
     <div class="hello">Witcher 3</div> 
 
    </li> 
 

 
    </ul> 
 
</div>

Answer 1

あなたはすでに様々なli年代にそれらを配置することにより、画像のwidthを設定します。 width: 100%が指定されている場合は、のwidthが20%のコンテナを使用するように指定するだけです。

#bt { 
 
    color: white; 
 
    margin-top: 1%; 
 
    margin-left: -8%; 
 
} 
 
.resmontage ul { 
 
    float: left; 
 
    background-color: black; 
 
    width: 70%; 
 
    height: 25%; 
 
    padding-left: 7%; 
 
    margin-top: 1%; 
 
    border-radius: 1%; 
 
} 
 
.resmontage li { 
 
    list-style-type: none; 
 
    width: 20%; 
 
    margin-top: 1%; 
 
    float: left; 
 
    padding-right: 3%; 
 
} 
 
.resmontage img { 
 
    width: 100%; 
 
    height: auto; 
 
} 
 
.hello { 
 
    text-align: center; 
 
    color: white; 
 
    margin-top: 2%; 
 
}

<div id="bt">Games that will be released next month.</div> 
 
    <li> 
 
     <img src="https://upload.wikimedia.org/wikipedia/en/a/a5/Grand_Theft_Auto_V.png" /> 
 
     <div class="hello">Gta v</div> 
 
    </li> 
 

 
    <li> 
 
     <img src="http://media.steampowered.com/apps/valvestore/images/slider/store_image_02.png" /> 
 
     <div class="hello">CSGO</div> 
 
    </li> 
 

 
    <li> 
 
     <img src="https://upload.wikimedia.org/wikipedia/commons/e/e0/Rocket_League_coverart.jpg" /> 
 
     <div class="hello">Rocket League</div> 
 
    </li> 
 

 
    <li> 
 
     <img src="http://blogs-images.forbes.com/erikkain/files/2014/12/The-Witcher-3-Wild-Hunt.jpg" /> 
 
     <div class="hello">Witcher 3</div> 
 
    </li> 
 

 
    </ul> 
 
</div>