Center an overflowing image - html

Question

I'm trying to make an image that overflows on it its parent div, but that's centered according to its parent.
Heres how I'd like it to look:
This is the code I currently have but obviously doesn't work,
.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
I want to achieve this in pure css, no use of javascript.

Answer 1

You can center your image with the "negative translate" trick.
Here's a working example:
.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>

Answer 2

Based on 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

Try this:
.image{
width:175%;
height:auto;
position: absolute;
top: -9999px;
bottom: -9999px;
left: -9999px;
right: -9999px;
margin: auto;
}
It should center your <img> no matter the size of the parent div

Answer 4

Oh looks like I'm late to this party, but I was going to suggest this technique - using the ::after pseudo element to draw your square underlay and don't actually make the image overflow the wrapper div.
https://codepen.io/hamzatayeb/pen/QMxJvw
<div class="wrapper">
<img class="image" src="http://pngimg.com/uploads/goat/goat_PNG13151.png">
</div>
Then this 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

Try this add this style only to your image
.image{
width:175%;
height:auto;
position:absolute;
top: -18px;
right: -65px;
}
JS Fiddle