将Div中的超大图像居中

我一直在试图找出如何仅使用CSS在div内居中放置超大图像的方法。

我们使用的是流畅的布局，因此图像容器的宽度会随着页面宽度的变化而变化（div的高度是固定的）。该图像位于一个div中，并带有一个插入框阴影，以使您看起来就像在浏览页面时一样。

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

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

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

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

我们可以指定一个width=100%，但是浏览器无法很好地调整图像的大小，而Web设计围绕高质量的图像进行。

关于将图像居中以overflow:hidden均匀切掉两个边缘的任何想法吗？

尝试这样的事情。无论其大小如何，这都应使任何巨大的元素相对于其父元素在垂直和水平方向上居中。

.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;

}

这是一个旧的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>

那为什么行得通呢？
乍一看，似乎我们向右移动了50％，然后又向左移动了50％。那将导致零位移，那又如何呢？
但是50％并不相同，因为上下文很重要。如果使用相对单位，则边距将作为父元素宽度的百分比计算，而变换将是相对于同一元素的50％。

在添加CSS之前，我们有这种情况

       +-------------------------------------------+
       | Parent element P of E                     |
       |                                           |
       +-----------------------------------------------------------+
       | Element E                                                 |
       +-----------------------------------------------------------+
       |                                           |
       +-------------------------------------------+

随着增加的风格，margin-left: 50%我们有

       +-------------------------------------------+
       | Parent element P of E                     |
       |                                           |
       |                     +-----------------------------------------------------------+
       |                     | Element E                                                 |
       |                     +-----------------------------------------------------------+
       |                     |                     |
       +---------------------|---------------------+
       |========= a ========>|

       a is 50% width of P

然后transform: translateX(-50%)移回左侧

       +-------------------------------------------+
       | Parent element P of E                     |
       |                                           |
+-----------------------------------------------------------+
| Element E                 |                               |
+-----------------------------------------------------------+
|<============ b ===========|                      |
       |                    |                      |
       +--------------------|----------------------+
       |========= a =======>|

       a is 50% width of P
       b is 50% width of E

不幸的是，这仅适用于水平居中，因为边距百分比计算始终相对于宽度。即不仅margin-left和margin-right，而且还margin-top和margin-bottom相对于宽度被计算。

浏览器兼容性应该没问题：https : //caniuse.com/#feat=transforms2d

在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，但是需要将图像的高度绝对地放置在其中。

游戏晚了，但是我发现这种方法非常直观。 https://codepen.io/adamchenwei/pen/BRNxJr

的CSS

.imageContainer {
  border: 1px black solid;

  width: 450px;
  height: 200px;
  overflow: hidden;
}
.imageHolder {
  border: 1px red dotted;

  height: 100%;
  display:flex;
  align-items: center;
}
.imageItself {
  height: auto;
  width: 100%;
  align-self: center;

}

的HTML

<div class="imageContainer">
  <div class="imageHolder">
    <img class="imageItself" src="http://www.fiorieconfetti.com/sites/default/files/styles/product_thumbnail__300x360_/public/fiore_viola%20-%202.jpg" />
  </div>
</div>

请勿在图片标签上使用固定或明确的宽度或高度。相反，对其进行编码：

      max-width:100%;
      max-height:100%;

例如：http：//jsfiddle.net/xwrvxser/1/

我非常喜欢将图片作为div / node的背景，background-position: center因此无论屏幕大小如何，您都可以使用该属性将其居中

宽度和高度仅作为示例：

parentDiv{
    width: 100px;
    height: 100px;
    position:relative; 
}
innerDiv{
    width: 200px;
    height: 200px;
    position:absolute; 
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

如果您的父div的左侧和顶部不是屏幕窗口的顶部和左侧，它必须为您工作。这个对我有用。

我发现这是没有flex的更优雅的解决方案：

.wrapper {
    overflow: hidden;
}
.wrapper img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* height: 100%; */ /* optional */
}

以@yunzen的出色答案为基础：

我猜很多搜索此主题的人都在尝试将大图像用作“英雄”背景图像，例如在首页上。在这种情况下，他们通常希望文本出现在图像上并在移动设备上很好地缩小。

这是用于此类背景图像的完美CSS（在<img>标记上使用）：

/* 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%);

/* Scale image...(101% - instead of 100% - avoids possible 1px white border on left of image due to rounding error */
width: 101%;

/* ...but don't scale it too small on mobile devices - adjust this as needed */
min-width: 1086px;

/* allow content below image to appear on top of image */
position: absolute;
z-index: -1;

/* OPTIONAL - try with/without based on your needs */
top: 0;

/* OPTIONAL - use if your outer element containing the img has "text-align: center" */
left: 0;

您可以使用的一种选择是object-fit: cover它的行为类似于background-size: cover。有关对象拟合的更多信息。

忽略下面的所有JS，仅用于演示。

这里的关键是您需要在包装器内设置图像并为其提供以下属性。

.wrapper img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

我在下面创建了一个演示，您可以在其中更改包装器的高度/宽度并在游戏中查看。图像将始终垂直和水平居中。它将占据其父代宽度和高度的100％，并且不会被拉伸/挤压。这意味着可以保持图像的纵横比。可以通过放大/缩小来应用更改。

唯一的缺点object-fit是它在IE11上不起作用。

// for demo only
const wrapper = document.querySelector('.wrapper');
const button = document.querySelector('button');
const widthInput = document.querySelector('.width-input');
const heightInput = document.querySelector('.height-input');


const resizeWrapper = () => {
  wrapper.style.width = widthInput.value + "px";
  wrapper.style.height = heightInput.value + "px";
}

button.addEventListener("click", resizeWrapper);

.wrapper {
  overflow: hidden;
  max-width: 100%;
  margin-bottom: 2em;
  border: 1px solid red;
}

.wrapper img {
  display: block;
  height: 100%;
  width: 100%;
  object-fit: cover;
}

<div class="wrapper">
  <img src="https://i.imgur.com/DrzMS8i.png">
</div>


<!-- demo only -->
<lable for="width">
  Width: <input name="width" class='width-input'>
</lable>
<lable for="height">
  height: <input name="height" class='height-input'>
</lable>
<button>change size!</button>