针对不同屏幕调整图像大小

Question

大家好，

上图显示了一系列图像和相应的链接文本。要求是我需要缩小图像和文本，以便它们在不同的屏幕分辨率下出现在同一行...

我使用 vw 作为字体调整大小的字体规范。但无法使用以下 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;
}