Question

我的CSS中有一个带有图像的响应式页面的错误。

您会注意到此示例在调整窗口大小时有时会出现深色背景（#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 。

希望这有帮助！

Answer 2

您的<li>元素的宽度大于图片的宽度。尝试将您的li宽度设置为auto -

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

Answer 3

找到解决方案！： - ）

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

Answer 4

你可以使用margin-bottom：-5px;在css代码中

响应式网页上的图像的CSS错误

4 个答案: