在Div中中心放大图像

我一直在尝试理清如何使用CSS只在一个div的中心放大超大图像。

我们使用流体布局，因此图像容器的宽度随着页面宽度的变化而变化（div的高度是固定的）。 图像位于一个div内，其中包含一个嵌入的boxshadow，以便看起来好像您正在通过图像上的页面查看。

图像本身的大小可以用尽可能最大的值填充周围的div（设计具有max-width值）。

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

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

但是当图像大于div时，它只是从左边缘开始，偏离右边（我们使用overflow: hidden ）。

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

任何关于使图像居中以使overflow:hidden均匀切割两边的想法？

---

尝试这样的事情。 这应该中间任何巨大的元素垂直和水平相对于其父母，无论他们的大小。

.parent {
    position: relative;
    overflow: hidden;
}

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

}

---

这是一个古老的Q，但是没有Flexbox或绝对位置的现代解决方案就像这样。

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>

---

在div中放置一个大div，以该div的中心为中心。

这以水平方式为中心：

HTML：

<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使用相同的内容，但是你需要将图像的高度放在内部。

链接地址: http://www.djcxy.com/p/87499.html

上一篇: Center Oversized Image in Div

下一篇: Change Pure CSS3 Accordion Style for expanded and contracted states