CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Anand Jaju
Anand Jaju

Reputation: 458

How to make combination of images responsive?

I have a header which is having 5 menus. Those 5 menus are nothing but images.

First menu image width is bigger. And all other menu image widths are same as shown below screenshot.

enter image description here

I have coded as following to make as above.

<div id="head-section">
        <ul>
            <li><a href="index.html"><img src="res/1.png"></a></li>
            <li><a href="index.html"><img src="res/Home-n.png"></a></li>
            <li><a href="http://eywaz.com/sit2/MTA-2Website21-02/mta"><img src="res/blog.png"></a></li>
            <li><a href=""><img src="res/Help-n.png"></a></li>
            <li><a href=""><img src="res/Contact_us-n.png"></a></li>
        </ul>
    </div>

CSS is as follows:

#head-section {
    width:800px;
    margin:auto;
    margin-top:30px;
}

ul li{
    float:left;
    display:block;
    width:15%;
}

ul li:first-child{
    width:37.5%;
}

ul li a img{
    width:100%;
}

Header is looking nice. But as I decrease the size of browser, the images in the header are not decreasing. The size of full header remains same.

I did Google, but I am not getting how to resolve it. Please can any one tell me to resolve this issue. Thanks in advance.

Upvotes: 0

Views: 90

Answers (2)

Hadi
Hadi

Reputation: 2905

try use - 

ul li a img{
    max-width:100%;
}

and for #head-section

#head-section { width:100% }

while you are putting 100% width to any selector then don't add padding/margin on that div.

Upvotes: 1

ralph.m
ralph.m

Reputation: 14345

Just change the width on #head-section to max-width:

#head-section {
    max-width: 800px;
    margin: auto;
    margin-top: 30px;
}

Upvotes: 0

Related Questions