CODEWITHSUNDEEP
htmlcss
Drimades Boy
Drimades Boy

Reputation: 417

How to style a proportionally scaling header image in CSS?

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?

Upvotes: 0

Views: 2479

Answers (1)

Webdeveloper_Jelle
Webdeveloper_Jelle

Reputation: 2856

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!

Upvotes: 1

Related Questions