Question

我使用带有C＃后端的ASP.NET，并希望让网站显示移动版和桌面版的不同图像。我想我可以用CSS做到这一点，但无法弄清楚如何。我有不同的css文件设置和其他元素，但对于这些ImageButtons，我有一些不好的行为。如果我没有设置ImageUrl属性，它会完成我需要的功能，但会放置＆＃34;搜索＆＃34;因为它正在寻找不存在的ImageUrl路径，所以我的按钮周围会出现灰色轮廓。如果我按如下所示设置ImageUrl属性，文本和框会消失，但图像不会随着我的需要而改变。我用一个和img标签和LinkButtons尝试了这个，但两种方式都得到了相同的结果。如果用户通过移动设备访问，更改这些按钮的大小和图像的最佳方法是什么？

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

Answer 1

使用CSS媒体查询根据屏幕大小切换图像：

Introduction to CSS Media Queries

如何根据浏览器类型设置按钮图像

1 个答案: