CODEWITHSUNDEEP
htmlcsscentering
coiso
coiso

Reputation: 7479

center an image with unknow sizes and that might be bigger than the container with only css

I always wondered if this was possible without JS.

This is one of those situations where you can see that there is still a gap between devolpers and designers, hope we can help close it here :)

Here is a great explanation of how to do it (but for elements smaller than the container only) http://css-tricks.com/centering-in-the-unknown/

//HTML
<div class="something-semantic">
   <img class="something-else-semantic" src="wtvr"></img>
</div>

//CSS
.something-semantic {
   display: table;
   width: 100%;
}
.something-else-semantic {
   display: table-cell;
   text-align: center;
   vertical-align: middle;
}

Upvotes: 0

Views: 84

Answers (2)

user3037493
user3037493

Reputation: 312

the images top and left corners will always be flush with the container div, unless you know the size of the image and can give it ax explicit negative margin. 

example fiddle http://jsfiddle.net/rHUhQ/

depending on the situation you can just give the image a class that styles it how you want since apparently it's container isnt that important (if it can be covered by the image in the first place).

Upvotes: 0

chrisgonzalez
chrisgonzalez

Reputation: 4213

Best solution I've used as of late is half-hack, half-awesome.

<div class="something-semantic" style="background-image: url( {{src}} )">
   <img class="something-else-semantic" src="{{src}}" />
</div>

//CSS
.something-semantic {
    position:relative; /* or something other than static */
    background-repeat:no-repeat;
    background-size:contain;
    background-position:center center;
}

.something-semantic img{
    width:100%;
    height:100%;
    opacity:0;
}

So for an image gallery, I'd inject the image src into inline background-image property and the <img> src attribute.

Making the REAL image completely transparent (but still visible), allows for alt tags, title, etc. Using background property lets you constrain the image dimensions to whatever size container you'd like.

Upvotes: 2

Related Questions