Search code examples
csspositioningscalescalingpercentage

CSS - Scaling elements and images rel. to window size using %

I have a 1920x650 image and a transparent, horizontal rectangle at bottom left hand side of it. I've managed to make it scale with the image. Problem is I can't figure out how to make it scale in a way that it would lose more of it's width. It scales exactly with the img. 

.container{
    position: relative;
    width: 100%;
    height: 100%;}

.bg-img{
    display:block;
    position: relative;
    width: 100%;
    height: 100%;
    z-index:1;}

.transblock{
    position:absolute; 
    width:44%; 
    height:6%; 
    top:90%; 
    left:0%; 
    z-index:5;}

http://jsfiddle.net/FA7XE/2/ - Start full screen, scale window down - the box & text drifts too much to middle. (it scales perfect with the image, which is a bad thing in this case :( ). I'd like to have it stay in place relative to the menu below. Any ideas how to do that? Thanks!

Solution

  • The containers used to display the green rectangle and the text use procentual widths. Looking at the CSS you'll see that there is no fixed width specified for the parent elements. This will translate to browsers taking the body width value and using it to compute the dimensions.

    Basicaly you'll always have a width of 44% (taken from the body width) for '.transblock' div and a width of 30% for the '.h1text' div.

    A workaround to achieve the desired effect could be the use of a bit of javascript(jQuery) code to dynamically compute the width and position of the elements:

    jQuery('.transblock').width(jQuery('body').width() * 0.44);
jQuery('.h1text').width(jQuery('body').width() * 0.3);
jQuery('.h1text').css('left', jQuery('body').width() * 0.135);

    You can take a look at this fiddle

    Note: Take care of how you use the width and the height on the images. Setting width: 100%; and height: 100%; on non-square images might end up with unwanted aspect ratio: 

    .bg-img{
    width: 100%;
    height: 100%;
}

    It will suffice to specify width: 100% - browsers will make the image fit the container without forcing the height of the image, keeping the ratio at 1:1.