html - 响应式网页上带有图像的 CSS 错误

Question

当涉及到包含图像的响应式页面时，我的 CSS 中有一个错误。

演示:https://jsfiddle.net/xr4getom/

在此示例中，您会注意到当您调整窗口大小时有时会出现深色背景 (#222)。有没有解决这个问题的方法，它只会强制图像占据这个区域 - 同时保持比例正确？

我省略了这里的 CSS，因为它超出了字符数限制，但是如果您单击演示链接，您可以看到它。

 	<section class="news-bloc">
	<div class="news-container">
		<h1>Latest News</h1>
		<ul class="news-list">
			<li>
				<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'>
				<p>View Post</p></a>
			</li>
		</ul>
	</div>
</section>

Answer 1

在您的 <a> 的背景中设置图像而不是使用 <img>标签。喜欢:

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 .

希望这对您有所帮助!