-2

在我的网站上有一个 div，在 div 内我有不同的图像宽度不同的宽度和高度。无论大小或形状如何，我都希望图像位于中心。假设 div 是 200px * 200px。所有图片都需要有 min-width: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>
4

2 回答 2

0

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

于 2013-10-23T22:17:29.923 回答
0

这是一个重复的问题。此处引用的答案是将图像显示为 CSSbackground-image而不是使用img元素并将其设置为显示在中心：

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

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

div.with-background-image {
  background: url(/path/to/image.jpg) no-repeat center center;
  background-size: cover;
}
于 2013-10-24T02:22:06.763 回答