将溢出的图像居中答案

【问题标题】：Center an overflowing image将溢出的图像居中
【发布时间】：2018-02-01 13:37:02
【问题描述】：

我正在尝试将其上溢出的图像作为其父 div，但它根据其父 div 居中。

这是我希望它的外观：

这是我目前拥有但显然不起作用的代码，

.wrapper{
  height:150px;
  width:150px;
  position:relative;
  background:red;
  margin:5em auto;
}

.image{
  width:175%;
  height:auto;
  position:absolute;
}

body{
  background:purple;
}

<div class="wrapper">
  <img class="image" src="https://pngimg.com/uploads/goat/goat_PNG13151.png">
</div>

JSFiddle
Fiddle

我想用纯css实现这个，不使用javascript。

【问题讨论】：

标签： html css

【解决方案1】：

您可以使用"negative translate" 技巧将图像居中。

这是一个工作示例：

.wrapper {
  height: 150px;
  width: 150px;
  position: relative;
  background: red;
  margin: 5em auto;
}

.image {
  width: 175%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

body {
  background: purple;
}

<div class="wrapper">
  <img class="image" src="https://pngimg.com/uploads/goat/goat_PNG13151.png">
</div>

【讨论】：

完美！正是我想要的。
由于 IE 的问题，我会避免使用转换来居中内容：stackoverflow.com/questions/27000492/… 在这个用例中，应该没问题 - 虽然当有更多块级节点时，你会遇到一些溢出问题。
@Bitz 好吧，这是我使用它的唯一方法，个人看起来是最好的方法，或者实际上将顶部、左侧、底部、右侧设置为 -9999px更好的方法..？
我不会在这里担心。 IE“幽灵元素”问题通常仅在对大型或主要布局元素使用转换时发生 - 即使这样也有解决方法。我特别不喜欢-9999px 解决方案，因为它本质上是一个神奇的数字（这是一件坏事）：css-tricks.com/magic-numbers-in-css
我会说这个用例很好。 @MartijnEbbens，正如乔恩指出的那样 - 其他解决方案依靠魔术数字来处理不太理想的情况。如果您要继续使用它进行构建，稍后您可能会遇到一些时髦的布局问题。很难说到底是什么。（像这样溢出的东西往往不能很好地与内联块级元素一起使用）

【解决方案2】：

基于this question。

.wrapper{
  height:150px;
  width:150px;
  position:relative;
  background:red;
  margin:5em auto;
}

.image{
  width:175%;
  height:auto;
  position: absolute;
  top: -9999px;
  bottom: -9999px;
  left: -9999px;
  right: -9999px;
  margin: auto;
}

body{
  background:purple;
}

【讨论】：

虽然我对@Jon Uleis 的方式更满意，但我觉得使用负数 9999 似乎并不是最好的方法。

【解决方案3】：

试试这个：

.image{
  width:175%;
  height:auto;
  position: absolute;
  top: -9999px;
  bottom: -9999px;
  left: -9999px;
  right: -9999px;
  margin: auto;    
}

无论父级div 的大小如何，它都应该使您的<img> 居中

【讨论】：

【解决方案4】：

哦，看起来我参加这个聚会迟到了，但我打算建议这种技术 - 使用 ::after 伪元素来绘制你的方形底层，并且实际上不会使图像溢出包装 div。

https://codepen.io/hamzatayeb/pen/QMxJvw

<div class="wrapper">
  <img class="image" src="http://pngimg.com/uploads/goat/goat_PNG13151.png">
</div>

然后这个 CSS -

.wrapper {
  width: 262px;
  height: 262px;
  position: relative;
  margin: 5em auto;
}

.wrapper::after {
  content: "";
  background: red;
  position: absolute;
  top: 16%; right: 16%; bottom: 16%; left: 16%;
  z-index: -1;
}

.image {
  padding-top: 25px;
  width: 100%;
  height: auto;
}

body {
  background: purple;
}

【讨论】：

【解决方案5】：

试试这个，把这个样式只添加到你的图片中

.image{
      width:175%;
      height:auto;
      position:absolute;
      top: -18px;
      right: -65px;
 }

JS Fiddle

【讨论】：