居中一个溢出的图像

Question

我正在尝试制作一个溢出其父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。

Answer 1

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

这是一个有效的例子：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 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;
}

Answer 3

试试这个：

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

无论父<img>

的大小如何，它都应以div为中心

Answer 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;
}

Answer 5

尝试将此样式仅添加到您的图片

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

JS Fiddle