1

I'm trying to resize different images to all fit into a squared div. It seems like I found a perfect answer in this topic: Force bootstrap responsive image to be square The answer of @web-tiki works just fine. The only problem is, the images are not centered in the surrounding div. I don't know why I can't ask my question in this post, therefor I have to write it here. Any idea how to center my (now perfectly resized) images in the div? If the image is higher than wide, it sticks to the left side of the div. If it's wider than high, it sticks to the top of the div.

nucci
  • 137
  • 1
  • 3
  • 13
  • May be this question will be helpful to you? http://stackoverflow.com/questions/18673900/how-to-center-and-crop-an-image-to-square-with-css – Gunaseelan Oct 30 '14 at 08:39
  • You realise that changing the dimensions of the actual image in this way will alter the aspect ratio and make them look squashed? You would be much better to either use some code to crop the images, or simply serve them as square to start with. – CaribouCode Oct 30 '14 at 08:43

1 Answers1

1

try like this

.img-container {
  position:relative;
}

.img-container img {
  position:absolute;
  margin:auto;
  top:0;
  right:0;
  left:0;
  bottom:0;
  max-height:100%;
  max-width:100%;    
}

JS Fiddle

lbragile
  • 7,549
  • 3
  • 27
  • 64
Alvaro Menéndez
  • 8,766
  • 3
  • 37
  • 57