Image resize for different screens - asp.net

Question

Hello All,
Above picture shows a series of images and corresponding link text. Requirment is that I need to get shrink off images and also text so that they should appear in same line in different screen resolutions...
I have used vw as font specification for font resize. But unable to get image resized using the below css...
.bannerimage {
max-width: 100%;
height: auto;
width: auto/9;/* ie8 */
overflow:hidden;
}
Design code for the ribbon is as follows:
<div style="padding-left: 50px; padding-top: 20px; height: 110px; width: 100%">
<div>
<div style="float: left">
<div style="float: left;">
<asp:ImageButton runat="server" ImageUrl="~/Images/Go_to_icon.png" CssClass="footerimage" style="min-height:30px;min-width:30px" />
</div>
<div style="top: 15px; position: relative; float: left; width: 180px">
<div class="footerlinkdiv">
<asp:LinkButton ID="LinkButton9" runat="server" CssClass="footerlink" Text="Go To Administration Page" Style="text-align: start"></asp:LinkButton>
</div>
</div>
<div class="footerseprator">
</div>
</div>
<div style="float: left">
<div style="float: left; padding-left: 20px">
<asp:ImageButton ID="ImageButton8" runat="server" ImageUrl="~/Images/Go_to_icon.png" CssClass="footerimage" />
</div>
<div style="top: 15px; position: relative; float: left; width: 180px">
<div class="footerlinkdiv">
<asp:LinkButton ID="LinkButton10" runat="server" CssClass="footerlink" Text="Go To Authorize US Partners" Style="text-align: start"></asp:LinkButton>
</div>
</div>
<div class="footerseprator">
</div>
</div>
<div style="float: left">
<div style="float: left; padding-left: 20px">
<asp:ImageButton ID="ImageButton9" runat="server" ImageUrl="~/Images/Go_to_icon.png" CssClass="footerimage" />
</div>
<div style="top: 15px; position: relative; float: left; width: 180px">
<div class="footerlinkdiv">
<asp:LinkButton ID="LinkButton11" runat="server" CssClass="footerlink" Text="Go To Authorize Canada Partners" Style="text-align: start"></asp:LinkButton>
</div>
</div>
<div class="footerseprator">
</div>
</div>
<div style="float: left">
<div style="float: left; padding-left: 20px">
<asp:ImageButton ID="ImageButton10" runat="server" ImageUrl="~/Images/Go_to_icon.png" CssClass="footerimage" />
</div>
<div style="top: 15px; position: relative; float: left; width: 180px">
<div class="footerlinkdiv">
<asp:LinkButton ID="LinkButton13" runat="server" CssClass="footerlink" Text="Go To Authorize Distributor Page" Style="text-align: start"></asp:LinkButton>
</div>
</div>
</div>
</div>
</div>
tried a lot.. Could some one plz help me with css of the same for below ribbon

Answer 1

You will not be able to resize the text without a jquery library or css media queries. But you can resize the images by giving it some value for height or width like so:
.bannerimage {
max-width: 100%;
height: auto;
width: 10%;
overflow:hidden;
}