圖片調整爲不同的屏幕

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; 
}