CODEWITHSUNDEEP
jqueryhtmlcssresponsive-design
Dan
Dan

Reputation: 1660

Scale an image if the browser height or width changes but stay in proportion

I'm trying to make my first responsive website, i'm trying to design a landing page so that the text and images resize depending on the browser size.

I have done this with text but can't figure out how to do it with an image.

Here's a fiddle with my site so far: http://jsfiddle.net/581eg1cx/1/

You'll notice the text gets smaller depending on the height and width, I need to do the same with the image.

i.e if the browser height goes smaller the image will scale down while not overlapping or going under the text and staying centre, same goes for width.

Here's the css for the image part, the rest can be found in the fiddle.

.big-logo {
   max-width:auto;
   height:auto;
   position: absolute;
   top: 20%;
   left:50%;
   font-size:18px;
   background:blue;
   -webkit-transform: translateY(-50%) translateX(-50%);
   -ms-transform: translateY(-50%) translateX(-50%);
   transform: translateY(-50%) translateX(-50%);
}

.big-logo img {
   width:100% !important;
   height:100% !important;
   display:block;
}

Upvotes: 0

Views: 401

Answers (3)

Chris
Chris

Reputation: 77

What you are trying to achieve can be accomplished through pure CSS. I've altered your fiddle to show you how. Try to get out of the habit of positioning everything absolutely, that way you won't have to set 'top' on every element, let the natural flow of the website do the work.

Also avoid using transform as it's not supported in all browsers, what you are trying to do with translateY can be easily done with negative margins.

http://jsfiddle.net/581eg1cx/4/

code

Lastly, not everything on a responsive website has to scale, text especially. Work with CSS media queries and set content based on recognised device break points, i.e. 320px wide = iphone. As @single31 states it's also a good idea to change disposition based on these break points.

Upvotes: 1

Omer Bonfil
Omer Bonfil

Reputation: 417

updated the JSFiddle, I think this is what you meant.

the image and container css should be:

.big-logo {
   height:50%;
   position: relative;
   font-size:18px;
   background:blue;
   text-align:center;
}

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

I also modified the main-text css as well, have a look.

Upvotes: 0

devajay
devajay

Reputation: 417

You can do this by two method one is base on css media tag and another is jquery dynamic function 

$(window).load(function() {    

    var theWindow        = $(window),
        $img              = $("#img"),
        aspectRatio      = $img.width() / $img.height();

    function resizeBg() {

        if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
            $img
                .removeClass()
                .addClass('bgheight');
        } else {
            $img
                .removeClass()
                .addClass('bgwidth');
        }

    }

    theWindow.resize(resizeBg).trigger("resize");

});

Upvotes: 0

Related Questions