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

Posted 2023-02-25

【中文标题】调整浏览器大小时图像超出 div

【英文标题】：Image goes outside div when browser is resized

【发布时间】：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:[e-mail]" 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 谢谢。

【参考方案1】：

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

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

【参考方案2】：

添加不重复

背景：url(../images/Death_to_stock_Marzocco_Coffee_10.jpg) 无重复中心；

还添加 背景大小：包含；到 .contact-section 属性来缩放背景图像。

【讨论】：

@avipatel 嗯。我添加了 background-size: cover contain; 的包含，它只能是覆盖或包含吗？

@Jebediah15 正确 - 这是其中之一。 cover 表示“缩放背景图像以使其覆盖整个 div”（背景很可能会被裁剪），而 contain 表示“缩放背景以使整个背景图像可见”

@TylerRoper 真棒。谢谢你的解释——你可以告诉我我是一个初学者