CODEWITHSUNDEEP
jqueryimagehover
thepar
thepar

Reputation: 3

Image does not remain same size when window is resized- twitter bootstrap

Hey Guys I am using twitter bootstrap for a website along with this jquery script:

$('.fadein').each(function() {

var std = $(this).attr("src");
var hover = std.replace("img/flyoutcricket-noglow.jpg", "img/flyoutcricket-glow.jpg"); 
$(this).clone().insertAfter(this).attr('src', hover).removeClass('fadein').siblings().css({
    position:'absolute'
});
$(this).mouseenter(function() {
    $(this).stop().fadeTo(700, 0);
}).mouseleave(function() {
    $(this).stop().fadeTo(700, 1);
});

});

The trouble I am having is when resizing the responsive web page. The images do not remain the same size in smaller windows. (tablet, mobile, etc.) Any ideas?

the webiste is flyoutcricket.com. Thanks for the help.

Upvotes: 0

Views: 662

Answers (1)

BjornJohnson
BjornJohnson

Reputation: 332

img {
    border: 0 none;
    height: auto;
    max-width: 100%;
    vertical-align: middle;
}

This is the CSS for img from bootstrap. The image is always going to be sized at 100% of the width of its containing block, with the height keeping in proportion. But this is not the case when the image is absolutely positioned and the containing element is statically positioned.

So change your CSS so that the containing element for those images is not statically positioned:

.chapter1 {
    border: 30px;
    display: block;
    margin: 0 auto;
    position: relative;
}

EDIT: Bad explanation on my part of bootstrap's rule for img.

This is better:

Instead of just rendering at its native width and overflowing its containing box, the image would render at its native dimensions as long as its width didn’t exceed the width of its container.

from: http://unstoppablerobotninja.com/entry/fluid-images/

Upvotes: 1

Related Questions