How do I make the image appear in the center of the div?

Question

On my site a have a div, inside the div I have different images width different width's and height's. I want the image to be in the center no matter what size or shape. Lets say the div is 200px * 200px. All images need to have min-width:100%; and min-height:100%; so that there is no white in the background. So basically I want the center of the image to be in the center of the div. How do I do it?...

<!DOCTYPE html>
<html>
  <head>
    <style>

      .div{
        width:200px;
        height:200px;
        overflow:hidden;
        box-shadow:0px 0px 5px #000;
      }

      .img{
        /*What shall I put here?*/
        min-width:100%;
        min-height:100%; 
      }

    </style>
  </head>

  <body>
    <div class="div">
      <img class="img" src="img.jpg">
    </div>
  </body>
</html>

possible duplicate of [How to make an image center (vertically & horizontally) inside a bigger div](http://stackoverflow.com/questions/388180/how-to-make-an-image-center-vertically-horizontally-inside-a-bigger-div) — coreyward, Oct 23 '13 at 22:16
possible duplicate of http://stackoverflow.com/questions/3029422/image-auto-resize-to-fit-div-container — Sergio Wizenfeld, Oct 23 '13 at 22:35
@Gavin And the technique referenced in the linked question works regardless of the size of the image relative to its container. This is a duplicate question. — coreyward, Oct 24 '13 at 02:15

score 0 · Answer 1 · answered Oct 23 '13 at 22:17

0

You would be best setting the image as a background of the div and using setting the background position.

answered Oct 23 '13 at 22:17

Gavin

2,123
1
15
19

Suppose you have a image that is bigger that the DIV, how do you change the background-image size to make it fit? – Israelm Oct 23 '13 at 22:28
From what the op has asked it sounds like they wand to "crop" the image and only show the centre. No need to resize. – Gavin Oct 23 '13 at 22:32
That is a good aproach to avoid other components to move on they relative position if the images are larger than the container, if you already know the images you're displaying are not larger that container i think you can still use
to make it work.
– Israelm Oct 23 '13 at 22:36
1

@Israelm, it is bad to use attribute "align" at div because it is deprecated: http://www.w3schools.com/tags/att_div_align.asp. Also, it does not center vertically. – Alex Oct 23 '13 at 22:38
It dose not work with some images, I get a white area around the div. I need the image to take up all the space. the width or the height must be 100% of the div's size. – Michael Oct 23 '13 at 22:43

score 0 · Answer 2 · edited May 23 '17 at 10:25

This is a duplicate question. The answer, as referenced here, is to display the image as a CSS background-image rather than using an img element and set it to display in the center:

div.with-background-image { 
  background: url(/path/to/image.jpg) no-repeat center center;
}

To ensure that your image is as least as large as its “containing” element you can use the background-size property, which accepts a number of different properties. The one you want is cover, which instructs the rendering engine to stretch the image so both dimensions of the image are at least equal to that of the element:

div.with-background-image {
  background: url(/path/to/image.jpg) no-repeat center center;
  background-size: cover;
}

How do I make the image appear in the center of the div?

2 Answers2