1

C# バックエンドで ASP.NET を使用しており、モバイル バージョンとデスクトップ バージョンで異なる画像をサイトに表示したいと考えています。CSSでこれを行うことができると考えましたが、方法がわかりません。さまざまな css ファイルをセットアップして他の要素に対して動作させていますが、これらの ImageButtons に対しては動作が悪いです。ImageUrl 属性を設定しない場合、必要なことは実行されますが、存在しない ImageUrl パスを探しているため、ボタンの周りに「検索」とグレーのアウトラインが表示されます。以下に示すように ImageUrl 属性を設定すると、テキストとボックスは消えますが、必要に応じて画像は変更されません。a と img タグと LinkBut​​tons でこれを試しましたが、両方の方法で同じ結果が得られました。ユーザーがモバイル デバイス経由でアクセスしている場合、これらのボタンのサイズと画像を変更する最良の方法は何ですか?

<div class="clear hideSkiplink">
    <asp:ImageButton ID="button1" runat="server" CssClass="button1" 
    OnCommand="ImageButton_Click" CommandName="button1" 
    ImageUrl="~/images/topbutton1.png"/>
    ...
    <asp:ImageButton ID="button4" runat="server" CssClass="button4" 
    OnCommand="ImageButton_Click" CommandName="button1" 
    ImageUrl="~/images/topbutton4.png"/>
</div>

CSS クラスは次のようになります。

普通：

.topbutton1
{
    padding: 0px 2px;
    background-image: url('../images/topbutton1.png');
    background-position: center center;
    background-repeat: no-repeat;
    display: inline;
    width: 180px;
    height: 60px;
}

モバイル：

.topbutton1
{
    padding: 0px 2px;
    background-image: url('../images/topbutton1mobile.png');
    background-position: center center;
    background-repeat: no-repeat;
    display: inline;
    width: 20%;
    height: auto;
}
4

1 に答える 1

1

CSS メディア クエリを使用して、画面サイズに基づいて画像を切り替えます。

CSS メディア クエリの概要

于 2013-10-22T22:56:51.720 に答える