Question

我已经检查了类“imagen_apartado”div，我看到背景溢出了他们的容器div，我真的不希望这种情况发生。有人可以解释这里发生的事情吗？

section.apartado,section.apartado a{
  text-decoration: none;
  color:white;
}

section.apartado > div{
  margin-top: 30px;
  background-color: rgb(56, 61, 61);
  border-radius: 18px;
  font-size:0;
  text-align: center;
  vertical-align: middle;
  padding: 17px 9px 25px 9px;
}

section.apartado div div {
  display: inline-block;
  font-weight:500;
  font-size: 14px;
  text-align: center;
  padding: 0 8px;
}

section.apartado div div p{
  padding-top: 13px;
}

section.apartado article#star_wars .imagen_apartado{
  background: url(https://drive.google.com/uc?id=1uatBqgNrXlpdBMwdgNitNVt0PU9g3nJ7) no-repeat;
  background-size: cover;
  background-position: center center;
  display: block;
  width:278px;
  height: 180px;
}

<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Movies Drop</title>
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body>
    <section class="apartado">
      Películas
      <div>
        <div>
          <article class="new" id="star_wars">
            <div class="imagen_apartado"></div>
            <p><a href="#">Star Wars 2</a></p>
          </article>
        </div>
      </div>
    </section>
  </body>
</html>

Answer 1

是的，理查德说。

假设你的意思是溢出，那么图像会从div中消失，而不是完全显示：

使用

background-size: cover;

调整图像大小以覆盖整个容器。这可能导致切割或拉伸图像，在你的情况下切断它我猜？

如果你想确保显示完整的图像，你可以

background-size: contain;

这确保无论容器的大小如何，都会在容器内显示完整的图像。

您可以在此处详细了解背景尺寸：https://www.w3schools.com/cssref/css3_pr_background-size.asp

Answer 2

如果您不希望图片从div溢出，请将其放入<img>标记

如何避免css中的背景图像溢出div？

2 个答案: