CODEWITHSUNDEEP
jqueryhtmlcss
Denis
Denis

Reputation: 11

Image in center of page - resizable

I would like to center an image to center of website. Than when window resizes i would like to acommplish that image doesent resize, instead of resize its should be cropped left and right by browser window, so that center of image is in vertical center of image.

<div class="image-container">
    <img src=imgpath/image.jpg">
</div>

I tried this:

.image-container img{
   width: 100%;
   min-width: 1440 !important;
   margin: 64px auto 0 auto;
   height: auto;
   min-height: 400px !important;
}

img {
   vertical-align: middle;
}

Have any one any ideas how to make this. I would prefere by CSS if not jq should do.

Upvotes: 0

Views: 293

Answers (1)

Selvamani
Selvamani

Reputation: 7684

You can use display:table-cell to align the inner images to middle of the div.

But in this case you cant give margin because table-cell forces div to act as a td and technically you cant give margin to table td.

So I have added border to div with white color.

.image-container{
  background: #C8BFE7;
  text-align: center;
  display:table-cell;
  vertical-align:middle;
  border:white 5px solid
}

​

Demo: http://jsfiddle.net/Arav8/3/

Upvotes: 1

Related Questions