图片调整为不同的屏幕

Question

您好所有，

上面的照片是一系列图像和相应的链接文本。需求量的是，我需要收缩过的图像和文字，使他们应该会出现在不同的屏幕分辨率相同的行...

我已经使用大众作为字体大小调整字体规范。但是无法获得像使用下面的CSS ...

.bannerimage { 

max-width: 100%; 
    height: auto; 
    width: auto/9;/* ie8 */ 
    overflow:hidden; 

}为带状

设计代码如下调整：

<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

您将无法调整文字大小没有jQuery库或CSS媒体查询。但是你可以给它的高度或宽度一定的价值，像这样调整图像：

.bannerimage { 
max-width: 100%; 
height: auto; 
width: 10%; 
overflow:hidden; 
}