Question

在我的网站上有一个div，在div里面我有不同的图像宽度不同的宽度和高度。无论大小或形状如何，我都希望图像位于中心。让我们说div是200px * 200px。所有图像都需要最小宽度：100％;和最小高度：100％;这样背景中就没有白色了。所以基本上我希望图像的中心位于div的中心。我该怎么做？...

<!DOCTYPE html>
<html>
  <head>
    <style>

      .div{
        width:200px;
        height:200px;
        overflow:hidden;
        box-shadow:0px 0px 5px #000;
      }

      .img{
        /*What shall I put here?*/
        min-width:100%;
        min-height:100%; 
      }

    </style>
  </head>

  <body>
    <div class="div">
      <img class="img" src="img.jpg">
    </div>
  </body>
</html>

Answer 1

您最好将图像设置为div的背景并使用设置背景位置。

Answer 2

这是一个重复的问题。答案（如引用here）是将图像显示为CSS background-image，而不是使用img元素并将其设置为显示在中心：

div.with-background-image { 
  background: url(/path/to/image.jpg) no-repeat center center;
}

要确保您的图片至少与其“包含”元素一样大，您可以使用background-size property，它接受许多不同的属性。你想要的是cover，它指示渲染引擎拉伸图像，使图像的两个维度至少等于元素的维度：

div.with-background-image {
  background: url(/path/to/image.jpg) no-repeat center center;
  background-size: cover;
}

如何使图像显示在div的中心？

2 个答案: