CODEWITHSUNDEEP
cssimageresponsive-designcentering
Joel.O
Joel.O

Reputation: 2054

How to horizontally images resized (via CSS) to fit a box?

I'm currently stuck with this problem. I'm resizing a picture via CSS in a box with its height forced. 

.img_contener {
width: 100%;
height: 400px;
}

There is the CSS for the image resizing :

img {  
max-width: 100%;
max-height : auto;
height: auto;
width: auto;
box-sizing: border-box;
}

Now I want to center the resultant picture, which, depending on its height, doesn't fit to the containing box, and which is staying by default on the left.

Both the margin:auto and the text-align:center don't work.

I didn't try out jquery solutions so far... I would rather like a CSS-based solution. My alternative is to force-resize the picture using php.

Upvotes: 1

Views: 1074

Answers (4)

TNK
TNK

Reputation: 4323

If you want to keep your image to be centered in main DIV you need to use a additional tag to img

Something like this

<div id="container">

    <p><img src="http://userserve-ak.last.fm/serve/252/15767501.jpg" class="inner"/></p>

</div>

And Your CSS

#container {
    height: 100px;
    width: 200px;
    border: 1px solid black;
    overflow: hidden;

}

.inner {
    height: 120px;
    width: auto;
}

p {
    text-align: center;

}

Working Fiddle : http://jsfiddle.net/TXvuQ/1/

Upvotes: 1

freshbm
freshbm

Reputation: 5622

Try this:

.img_contener { 
   //your css ...

   overflow:hidden;
}


img {

   //your css ...

   display : block;
   margin : 0 auto;
}

Upvotes: 1

Scott Sword
Scott Sword

Reputation: 4708

This is completely doable in CSS. Please see my example below, you should also add overflow: hidden to your container object.

HTML

<div id="container">

    <img src="http://userserve-ak.last.fm/serve/252/15767501.jpg" class="inner"/>

</div>

CSS

#container {
    height: 100px;
    width: 100px;
    border: 1px solid black;
    overflow: hidden;

}

.inner {
    height: 100px;
    width: auto;
}

Working Fiddle - http://jsfiddle.net/TXvuQ/

Upvotes: 0

Maloric
Maloric

Reputation: 5605

Margin:auto will only work if you also apply display:block to the image.

Upvotes: 0

Related Questions