Question

我把一些我认为非常直接的东西放在一起。但是，当我重新调整浏览器大小时，其中一个图像会给我带来麻烦。我阅读了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来解决，正如几位评论员所提到的那样

Answer 1

您将图像（联系人部分）类应用于两个标签可能会产生某种不良影响

<section id="contact" class="contact-section text-center">
    <div class="contact-section">

Answer 2

添加无重复

背景：网址（../ images / Death_to_stock_Marzocco_Coffee_10.jpg）无重复中心;

还添加背景尺寸：包含;到.contact-section属性来缩放背景图像。

在调整浏览器大小时，图像会超出div

2 个答案: