All geek questions in one place

Center the image inside the div. Horizontally and vertically

I think this question has been asked many times, but I searched the Internet all day and can’t find a single good solution. I want to center the image inside the div so that it looks like a frame. I have images of different sizes, some - a portrait, some landscape. I want them to be horizontally and vertically centered and that it does not overflow the container if the size is larger. Now I read about the design of div vs table, but seriously, right now I just want the work to be done, so any solution would be very grateful.

+1
source share
2 answers

Check out the demo - http://jsfiddle.net/x6jDu/

cell table supports IE8 +

+3
source

You can achieve this by clicking on the demo link below:

DEMO http://jsfiddle.net/rathoreahsan/99BXT/

NOTE.

  • Cons: Using display:table-cell will not work under Internet Explorer 8 browsers, with the exception of other browsers. Pros: It will also work using fixed width and fixed height.

  • Pros: Using display:block , it will work in all browsers. Cons It will not work using a fixed width and a fixed height. But you can control it with the same padding for (top, right, bottom, left), as indicated in this demo

+3
source

Source: https://habr.com/ru/post/919447/

More articles:


All Articles