Center an overflowing image

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.

score 4 · Accepted Answer · answered Aug 23 '17 at 20:23

4

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>

answered Aug 23 '17 at 20:23

Jon Uleis

17,693
2
33
42

1

Perfect! Just what I was looking for. – Martijn Ebbens Aug 23 '17 at 20:26
I'd avoid using transform to center content due to issues with IE: https://stackoverflow.com/questions/27000492/css3-transform-property-working-differently-in-internet-explorer In this use case, it should be fine- though when there are more block level nodes, you will run into some issues with overflowing. – Bitz Aug 23 '17 at 20:27
@Bitz well this is the only way I'd be using it and personally looks like the best way to go about it, or would actually setting top,left,bottom,right to -9999px be a better way..? – Martijn Ebbens Aug 23 '17 at 20:28
1

I wouldn't worry about it here. The IE "ghost element" issue only typically occurs when using transforms on large or major layout elements - and even then there are workarounds for it. I particularly dislike the `-9999px` solution as it's essentially a magic number (which is a bad thing): https://css-tricks.com/magic-numbers-in-css/ – Jon Uleis Aug 23 '17 at 20:30
I would say that it's fine for this use case. @MartijnEbbens, and as Jon points out- the other solutions rely on magic numbers to deal with a less than ideal situation. If you were to continue to build with this, you may run into some funky layout issues later on. Hard to say exactly what though. (Overflowing things like this tend to not play nice with inline block level elements) – Bitz Aug 23 '17 at 20:36

score 1 · Answer 2 · answered Aug 23 '17 at 20:22

1

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

answered Aug 23 '17 at 20:22

A. W.

651
5
19

This works altough I'd more satisfied with the way of @Jon Uleis since I feel like using a negative of 9999 doesn't really seem the best way to go about it. – Martijn Ebbens Aug 23 '17 at 20:25

score 0 · Answer 3 · answered Aug 23 '17 at 20:22

0

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

answered Aug 23 '17 at 20:22

Bitz

1,128
11
33

score 0 · Answer 4 · answered Aug 23 '17 at 20:40

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

score -1 · Answer 5 · answered Aug 23 '17 at 20:27

-1

Try this add this style only to your image

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

JS Fiddle

answered Aug 23 '17 at 20:27

Sikandar_ali

149
1
10

Center an overflowing image

5 Answers5