0

So I have a div like

.div{
  width:78px;
  height:78px;
  overflow: hidden;
  position: relative;
  float: left;    
}

I want to put random images inside that div, I dont know the image dimensions.

If the image is bigger than the div , the image should get cropped and then centered in that div. And has to keep its aspect ratio.

I have to do this without CSS3.

I tried position absolute , display block and then add top and left and then minus the same amount of pixels in margin. 

top:50%;
left:50%;
margin-top:-50%;
margin-left:-50%;

I tried display block and margin left, margin right : 0 auto. I tried without the position absolute. I put float. I removed it. I dont know how to do it.

Please advice.

Here is a fiddle.

In the fiddle I should see the X centered and the 600 and 400 would be half outside the div. But at best, I see the 600 and the X. So the image preserves the ratio, gets cropped but cannot align it.

EDIT

I would like to do this without using the background property at all. Just the img.

Thanks

slevin
  • 4,166
  • 20
  • 69
  • 129
  • Also this http://stackoverflow.com/questions/11552380/how-to-automatically-crop-and-center-an-image and http://stackoverflow.com/questions/21966854/resize-and-crop-image-with-css – Turnip Jul 06 '16 at 22:24
  • @Turnip I am sorry I forgot to specify that I would like to do this without using the `background` property at all. Thanks – slevin Jul 07 '16 at 07:22
  • There are numerous answers in the links provided that use an `img` tag. – Turnip Jul 07 '16 at 07:24
  • @Turnip All of them use `background-image:` at some point, in html or css, Those who dont, they use CSS3 `transform` that is not fully supported. Thanks – slevin Jul 07 '16 at 07:45

0 Answers0