asp.net - 異なる画面の画像サイズ変更

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