【发布时间】：2016-09-09 17:34:14
【问题描述】：
我整理了一些我认为非常直截了当的东西。但是，当我重新调整浏览器大小时，其中一张图片给我带来了麻烦。我阅读了this、this 和this，试图找出图像跳出 div 的原因。我添加了overflow: hidden;，然后尝试将min-width 重新调整为500，之前是767。
css
.contact-section {
width: 100%;
height: auto;
padding: 50px 0;
color: white;
background: url(../images/Death_to_stock_Marzocco_Coffee_10.jpg) no-repeat center center;
background-color: black;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
overflow: hidden;
}
@media (min-width: 500px) {
.content-section {
padding-top: 250px;
}
html
<!-- Contact Section -->
<section id="contact" class="contact-section text-center">
<div class="contact-section">
<div class="container">
<div class="col-lg-8 col-lg-offset-2">
<!--<p>contact us</p> -->
<ul class="list-inline banner-social-buttons">
<li>
<a href="mailto:me@domain.com" class="btn btn-default btn-lg"><i class="fa fa-twitter fa-fw"></i> <span class="network-name">Email</span></a>
</li>
<li>
<a href="https://twitter.com/user" class="btn btn-default btn-lg"><i class="fa fa-twitter fa-fw"></i> <span class="network-name">Twitter</span></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
我遇到了两个问题： 1）我调整大小时图像溢出（图1） 2) div 图像出现失真（图 2）
感谢您的帮助。
编辑
问题 1 是由于错误地在覆盖 body 的目录中包含了较旧的 css 文件
问题 2 已通过添加 no-repeat 解决，正如几位评论者所提到的
【问题讨论】：
-
从您的
background-image属性中取出repeat，这应该可以解决第二个问题。 -
删除了
repeat，但图像呈现与附加图像相同 -
background-repeat的默认行为是repeat，这意味着如果您删除它，它仍然会重复。您必须将其设置为background-repeat: no-repeat;，或者对于您的代码，background: url(../images/Death_to_stock_Marzocco_Coffee_10.jpg) no-repeat center center; -
@TylerRoper 谢谢！这很有帮助
-
@TylerRoper +1 谢谢。