在Div中居中显示过大的图像

Question

我一直在尝试解决如何仅使用css在div中居中放置超大图像的问题。

我们使用的是流体布局，因此图像容器的宽度随着页面宽度的变化而变化（div的高度是固定的）。该图像位于一个div中，值为inset boxshadow，以便显示为您正在查看页面中的图像。

图像本身已经调整大小，以尽可能宽的值填充周围的div（设计有一个max-宽值）。

如果图像比周围的div小，这很容易做到：

margin-left: auto;
margin-right: auto;
display: block; 

但是当图像大于div时，它只是从左边缘开始，然后偏离中心向右（我们使用overflow：隐藏的）。

我们可以指定宽度=100%，但是浏览器在调整图像大小方面做得很糟糕，网页设计以高质量图像为中心。

有没有关于将图像居中以便溢出：隐藏均匀地切断两条边的想法？




Answer 1

将一个大div放在div的中间，然后将图像放在div的中间。

这将使其水平居中：

超文本标记语言：

<div class="imageContainer">
  <div class="imageCenterer">
    <img src="http://placekitten.com/200/200" />
  </div>
</div>

CSS：

.imageContainer {
  width: 100px;
  height: 100px;
  overflow: hidden;
  position: relative;
}
.imageCenterer {
  width: 1000px;
  position: absolute;
  left: 50%;
  top: 0;
  margin-left: -500px;
}
.imageCenterer img {
  display: block;
  margin: 0 auto;
}

演示：http://jsfiddle.net/Guffa/L9BnL/

为了垂直居中，您可以使用相同的内部div，但是您需要图像的高度来将其绝对放置在内部。

Answer 2

这是一个古老的Q，但没有flexbox或position absolute的现代解决方案是这样工作的。

margin-left: 50%;
transform: translateX(-50%);

.outer {
  border: 1px solid green;
  margin: 20px auto;
  width: 20%;
  padding: 10px 0;
  /*   overflow: hidden; */
}

.inner {
  width: 150%;
  background-color: gold;
  /* Set left edge of inner element to 50% of the parent element */
  margin-left: 50%; 
  /* Move to the left by 50% of own width */
  transform: translateX(-50%); 
}

<div class="outer">
  <div class="inner">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos exercitationem error nemo amet cum quia eaque alias nihil, similique laboriosam enim expedita fugit neque earum et esse ad, dolores sapiente sit cumque vero odit! Ullam corrupti iure eum similique magnam voluptatum ipsam. Maxime ad cumque ut atque suscipit enim quidem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi impedit esse modi, porro quibusdam voluptate dolores molestias, sit dolorum veritatis laudantium rem, labore et nobis ratione. Ipsum, aliquid totam repellendus non fugiat id magni voluptate, doloribus tenetur illo mollitia. Voluptatum.</div>
</div>

Answer 3

试试这样的。无论其大小如何，都应在其垂直方向和水平方向上将任何巨大的元素集中在其母面上。

.parent {
    position: relative;
    overflow: hidden;
    //optionally set height and width, it will depend on the rest of the styling used
}

.child {
    position: absolute;
    top: -9999px;
    bottom: -9999px;
    left: -9999px;
    right: -9999px;
    margin: auto;

}