CODEWITHSUNDEEP
htmlcsswordpressscale
Gonpires
Gonpires

Reputation: 91

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?

Upvotes: 0

Views: 1972

Answers (3)

SacWebDeveloper
SacWebDeveloper

Reputation: 2812

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/

Upvotes: 1

gorirrajoe
gorirrajoe

Reputation: 56

Have you tried making the image a background image instead? For the .useful_banner_manager_banner classed div, you can set that large background-image so it'll essentially crop itself based on screen size.

Upvotes: 0

Travis
Travis

Reputation: 2245

Looks like you have a media query that is making the width 140px !important.

Try changing the img on the media query to this 

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

Upvotes: 3

Related Questions