レスポンシブルウェブページのCSSバグ

Question

レスポンシブな画像のページに私のバグがあります。

デモ：https://jsfiddle.net/xr4getom/

あなたは、ウィンドウのサイズを変更すると、暗い背景（#222）は常時表示されていることをこの例に気づくでしょう。比率を正確に保ちながら、イメージがこの領域を占めるように強制する修正がありますか？

ここではCSSを省略していますが、文字制限を超えていますが、デモリンクをクリックすると表示されます。

\t <section class="news-bloc"> 
 
\t <div class="news-container"> 
 
\t \t <h1>Latest News</h1> 
 
\t \t <ul class="news-list"> 
 
\t \t \t <li> 
 
\t \t \t \t <a href='#' target='_blank'><img alt='' class='img-responsive photo-thumb image-link' src='https://scontent.cdninstagram.com/t51.2885-15/s320x320/e15/c157.0.406.406/14504934_1825657564379158_1219547695887155200_n.jpg?ig_cache_key=MTQwMDU3NTA0ODg3NjAyNTIxNA%3D%3D.2.c'> 
 
\t \t \t \t <p>View Post</p></a> 
 
\t \t \t </li> 
 
\t \t </ul> 
 
\t </div> 
 
</section>

Answer 1

解決策を見つけました！ :-)

ul.news-list>li>a {  
    width: 100%;   
} 

Answer 2

あなたはマージン下を使用することができます。-5px。 CSSコード

Answer 3

<li>要素の幅が画像の幅を超えています。あなたの代わりに<a><img>タグを使用しての背景に画像を設定し

ul.news-list li { 
float: left; 
width: auto; <-- Changed here 
margin-right: 1.63934%; 
float: left; 
margin-bottom: 1.63934%; 
background-color: #222 
} 

Answer 4

からautoにあなたのliの幅を設定してみてください。同様：

HTML：

<ul class="news-list"> 
    <li> 
    <a href='#' target='_blank' style="background-image: url('https://scontent.cdninstagram.com/t51.2885-15/s320x320/e15/c157.0.406.406/14504934_1825657564379158_1219547695887155200_n.jpg?ig_cache_key=MTQwMDU3NTA0ODg3NjAyNTIxNA%3D%3D.2.c');"> 
     <p>View Post</p> 
    </a> 
    </li> 
</ul> 

CSS：

.news-list li a { 
    display: flex; 
    width: 100%; 
    height: 200px; 
    background-size: cover; 
    background-position: center; 
} 

このjsFiddle Demoを見てください。

希望すると便利です。