CODEWITHSUNDEEP
csstwitter-bootstrapresponsive-design
Raphael Rafatpanah
Raphael Rafatpanah

Reputation: 19997

Why Does This Work? - Twitter Bootstrap 2.3.1

I recently posted a question where I asked how I may be able to vertically align a responsive image. I found the answer on my own, but it raised an even bigger question because I have no idea how or why it works.

Take a look at this jsFiddle: http://jsfiddle.net/fmwzT/1/

which uses the following code to vertically align an image in the navbar:

<div id="f1"><div id="outer-element"><img id="inner-element" src="http://zx85.dyndns.org/raphtest/img/title.png" alt="Logo"></div></div>

#fl {
    float: left;
}

#outer-element {
    display: table-cell;
    vertical-align: middle;
    height: 40px;
    max-width: 301px;
}

#inner-element {
    display: inline-block;
    margin-left: -20px;
}

However, without Bootstraps newest version (2.3.1) this does not work! Take a look at this jsFiddle: http://jsfiddle.net/fmwzT/2/

This second jsFiddle does not include Boostrap 2.3.1 but DOES contain Boostrap 2.3.0 (contained inside an external css file I called layout.css) and yet it does not work.

Question: Does anyone know what part of Twitter Bootstrap 2.3.1 is causing the image inside the navbar to be responsive?

Upvotes: 1

Views: 197

Answers (1)

isherwood
isherwood

Reputation: 61083

This is present in version 2.3.1 (responsive-combined.css) and not in prior versions:

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

Upvotes: 1

Related Questions