Question

在周围的div中，我希望将图像居中。此图像应具有强制尺寸但不拉伸。因此，如果div容器为100px * 100px且图像为200px * 200px，则应在每侧裁剪50px。

在this question中，您可以阅读如何强制尺寸。但我不希望图像从左下角开始，而是以中心为中心。这是一个问题：）

就是这样：

enter image description here

这就是我想要的方式：

enter image description here

Answer 1

给图像一个负左边距。在此示例中，margin-left:-50px。

编辑：或者，如果您不知道图像的宽度，可以将图像用作div的背景。

<div style="margin:0 auto; width:100px; height:100px; border:2px solid black;
  background:url(yourimagehere) 50% 0 no-repeat">
</div>

Answer 2

This可能就是您所需要的？

Answer 3

即使容器的方向与图像的方向（纵向/横向）不匹配，这也有效。 zoom(0.1)和min-width/height:1000%表示如果图像大小达到目标容器的10倍，我认为你必须在某处绘制一条线：（http://jsfiddle.net/FYnCG/）。如果你愿意，动画位只是一个测试，所以当高度成为限制因素时，你会看到它是如何缩放的。

<DOCTYPE html>
<html>
<head>
<style>
.container {
  width: 100px;
  height: 30px;
  border: 1px solid black;
  overflow:hidden;
  position:relative;
  transititon: width 5s, height 8s;
}
.container img {
  position: absolute;
  left:-10000%; right: -10000%; 
  top: -10000%; bottom: -10000%;
  margin: auto auto;
  min-width: 1000%;
  min-height: 1000%;
  -webkit-transform:scale(0.1);
  transform: scale(0.1);
}
.container:hover {
  width: 800px;
  height: 800px;
  transition: width 5s, height 8s;
}
</style>
</head>
<body>
  <div class="container">
    <img 
       src="https://www.google.de/logos/doodles/2014/european-parliament-election-2014-day-4-5483168891142144-hp.jpg" 
       />
    <!-- 366x200 -->
  </div>
</body>
</html>

强制尺寸的中心图像，无需拉伸

3 个答案: