Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Issue with Twitter Bootstrap #103

Open
zechdc opened this Issue · 5 comments

5 participants

@zechdc

I am using Twitter Bootstrap and when I resize the screen after a certain point it doesn't resize properly, it just squishes the image and dosen't keep the aspect ratio.

@zechdc

Cause

The issue is being caused by Twitters Bootstrap css file. Take a look at the bootstrap.css file.

img {
  width: auto\9;
  height: auto;
  max-width: 100%;
  vertical-align: middle;
  border: 0;
  -ms-interpolation-mode: bicubic;
}

The line that says max-width: 100% is causing the issue. You could just remove it from twitter bootstrap but who knows what issues that will cause with twitter bootstrap.

Solution

In the supersized.core.3.2.1.js file, near line 188 and 215 you will see the resizeWidth and resizeHeight functions. Make the following changes.

In the resizeWidth function:

}else{  // Otherwise, resize as normal
    thisSlide.width(browserwidth);
    thisSlide.height(browserwidth * ratio);
}

CHANGE TO

}else{  // Otherwise, resize as normal
    thisSlide.width(browserwidth);
    thisSlide.height(browserwidth * ratio);
    //fix issue with twitter bootstrap
    thisSlide.css('max-width', '100%');
}

In the resizeHeight function:

}else{  // Otherwise, resize as normal
    thisSlide.height(browserheight);
    thisSlide.width(browserheight / ratio);
}

CHANGE TO

}else{  // Otherwise, resize as normal
    thisSlide.height(browserheight);
    thisSlide.width(browserheight / ratio);
    //fix issue with twitter bootstrap
    thisSlide.css('max-width', browserheight / ratio);
}
@garrettd714

Thanks! Just what I was looking for.

@Sailias

+1

@kincade71

+1 Will this fix eventually get baked in future releases?

@bokkagroup

+1

Same fix for Zurb Foundation

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.