Search code examples
htmlcsswordpressscale

CSS: Banners squish while I scale down the Browser

Here are the full width banners which cause this issue. Im using a Plugin which enables you to upload a certain Image and set it up with a specific ID. So I Uploaded a jpeg with 2000px width and 600px height. Then I assigned the following CSS:

 #bannerPages {
 height: 296px;
 margin-top: 183px;
 width: 100%;

}

The banners look good on full screen, but they squish while down scaling the browser width. So I'd like to prevent the squishing effect and cutt the image while down scaling the browser size. How could I achieve this?

Solution

  • I played around with this for a while, but ultimately came up with two solutions depending on your needs. The first is easier to implement and more accurate to your requirements.

    Remove the image from the bannerHome element and add the following code to the CSS.

    .bannerHome {
    background-image: url('http://www.gonpires.com/carmacks/wp-content/uploads/useful_banner_manager_banners/6-homeJV.jpg');
    background-position: center center;
    background-size: cover;
    height: 890px
}

    http://jsfiddle.net/9sqjs/2/

    That method will only work in IE9+, Firefox Chrome, etc. Nice solution if you don't need IE8 support. You'll have to adjust your media queries as well. The other method requires more work and wouldn't crop the sides but it would fit and resize the image inside a 100% width container which would be cross-browser.

    http://jsfiddle.net/Q64S2/1/