如何在CSS中按比例缩放标题图像？

Question

I have a header with image in the following HTML page:

<div class="wrapperHeader">
    <div class="header">
        <img src="header.png">
    </div>
    <!-- header ends here -->
    <div class="menu-wrap">
        <nav class="menu">
            ...
        </nav>
    </div>
    <!-- menu-wrap ends here-->
</div>
<!-- wrapper Header ends here-->

The relevant CSS is as follows:

.menu-wrap {
    width: 70%;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
    background: #808080;
    margin: 0 auto;
}
.menu {
    width: 700px;
    margin: 0px auto;
}
.wrapperHeader {
    margin-left: auto;
    margin-right: auto;
    display: block;
}
.header {
    width: 1210px;
    height: 192px;
    margin: 0 auto;
}
.header img {
    position: absolute;
    max-width: 100%;
    max-height: 100%;
    margin: 0 auto;
}

When I zoom in and out the image in the header scales (up or down) faster than the menu, so I loose the proportions of the page. I would like some scaling similar to what you can see in http://www.studio-efekt.com.pl/ Any ideas how to solve this?

Answer 1

This works for you. The Image is placed into the empty block.

 .menu-wrap { width: 70%; box-shadow:0px 1px 3px rgba(0,0,0,0.2); background:#808080; margin: 0 auto; } .menu { width:700px; margin:0px auto; } .wrapperHeader { margin-left:auto; margin-right:auto; display:block; } .header { width:70%; height: 192px; margin: 0 auto; border: 1px solid black; } .header img { position: absolute; max-width:100%; max-height:100%; margin: 0 auto; } 

 <div class="wrapperHeader"> <div class="header"> <img src="header.png"> </div><!-- header ends here --> <div class="menu-wrap"> <nav class="menu"> ... </nav> </div> <!-- menu-wrap ends here--> </div> <!-- wrapper Header ends here--> 

Hope this helps!