How to make combination of images responsive?


Tags: html,css,twitter-bootstrap

Problem :

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.



Solution :

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.


    CSS Howto..

    How to call JavaScript on change of CSS

    Jquery - How to set mouseleave event to an after() generating div?

    How to create a clickable block?

    Big Cartel - Slideshow Questions

    how to make a timeline using html, css, javascript?

    How to find replacements of CSS 2.1 properties missing in CSS 3?

    How to Implement different backgrounds on scroll [closed]

    CSS - How to set height of absolute div same with neighbor image?

    How to change css style of input and some text in one function?

    How to have the nav and footer more than 1000px?

    How to select only for the first of divs with equal names?

    How to fix Image on top of text with css

    How to style a link which wrote with echo? [closed]

    How to place a css button in center (horizontal) of four table columns

    How to centre fluid image and a caption using CSS Flexbox?

    Block grid shows horizontal scroll bar in Foundation

    how to create 3 columns in HTML+CSS and group 2 div elements in the third column

    Asp.Net how to apply a css style to all the control of it's kind

    How can I easily copy the whole CSS file from a website?

    How to Inherit grandparent CSS not parent?

    Menu CSS showing current page in a single html file

    How to stack divs from top to bottom in CSS

    How to style form elements unobtrusively with JavaScript and CSS?

    how to find a css class which has another css class as sibling

    How to change H3 color in bootstrap using CSS file

    How can I organize my css rules?

    How to exclude styles for a some specific elements using css?

    Auto-scaled image not shown correctly with IE 10

    How to CSS Display:table grow right

    How to reduce space between unordered list and its previous element(center)?