我的ASP.net页面中有以下代码(我希望它能够响应)：
<div class="mobileTabsNav">
<div style="width: 100%; height: auto; min-height: 50px; max-height: 50px; background: #00ff00; background: url('/theImages/mobileMWBtn.png'); background-size: cover; text-align: center;">
PLEASE SIGN IN
</div>
</div>
CSS：
.mobileTabsNav
{
display: none;
width: 100%;
overflow: hidden;
}
@media (max-width: 715px)
{
.mobileTabsNav
{
display: block;
}
}
似乎图像的底部被截断：
当我将其更改为background-size：100％100％;时,图像在某些屏幕上拉伸得太多,如下例所示：
如您所见,图像失真.
无论如何确保不同屏幕尺寸的曲线是相同的,还是我必须添加三个单独的图像？
小提琴上使用的图像：
.mobileTabsNav
{
width: 100%;
overflow: hidden;
}
<div class="mobileTabsNav">
<div style="float: left; background: url('http://i.stack.imgur.com/NnCbY.png') no-repeat; min-height: 50px; min-width: 10px; max-width: 10px; background-size: contain;">
</div>
<div style="background: url('http://i.stack.imgur.com/KbPm8.png')"></div>
<div style="float: right; background: url('http://i.stack.imgur.com/rll1d.png') no-repeat; min-height: 50px; min-width: 10px; max-width: 10px; background-size: contain;">
</div>
</div>
解决方法
我要做的是创建一个背景图像,它可以很好地作为重复模式(tileable),然后使用border-radius属性来获得圆角.
在这种方法中,无论屏幕大小如何,点总是相同的大小,
并且您只需要一个图像用于所有设备.
.mobileTabsNav {
}
.mobileTabsNav .inner {
min-height: 400px;
background: #00ff00 url(http://i.stack.imgur.com/M8WDz.png);
text-align: center;
border-radius: 25px;
}
<div class="mobileTabsNav">
<div class="inner">
PLEASE SIGN IN
</div>
</div>
顺便说一下,这里是如何裁剪背景以使平铺看起来正确：
