如何确保 DIV 内的背景图像均匀显示答案

【问题标题】：How to ensure the background image inside a DIV is evenly shown如何确保 DIV 内的背景图像均匀显示
【发布时间】：2014-10-16 04:17:17
【问题描述】：

我的 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%; 时，图像在某些屏幕上被过度拉伸，如下所示：

如您所见，图像失真。

有没有办法确保曲线在不同屏幕尺寸的情况下是相同的，还是我必须添加三个单独的图像？

Fiddle 上使用的图像：

.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>

【问题讨论】：

天啊，希望您的代码在您的网站上看起来不像这样。在这里，你正在寻找的css参数：背景大小：包含/覆盖取决于你想要什么
@Romain 你的意思是我的网站上看起来不像？一旦我让它正常工作，我会将内联样式移回样式表。 contain 刚刚添加了多个图像以适应 DIV，cover 是我发布的截图。
为什么不使用 CSS 给 div 一个边框半径，它可以处理圆角。这样，您的弯角将始终存在并且尺寸正确。
@JoshKG 没想到。我会测试一下。
为了完美，在不同的无手柄设备上呈现不同的图像（加载更快）。此外，设备具有不同的分辨率。因此，检测分辨率+向设备渲染正确的图像是应该做的。注意：如果这只是一个小图标，可以使用 svg 格式。否则，你的代码是好的，但离完美的可用性还很远

标签： html css responsive-design

【解决方案1】：

我要做的是创建一个可以很好地用作重复图案（可平铺）的背景图像，然后使用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>

顺便说一句，下面是如何裁剪背景以使平铺看起来正确：

【讨论】：

@mark audet，图像重叠。谢谢你的尝试:)
你的意思是重复吗？您仍然需要调整图形以便正确平铺。
我能够在单独的图像中显示左侧和右侧 (jsfiddle.net/8f35d79h)，我想知道是否有办法重复中间图像。我希望中间的 DIV 能够响应。我该怎么做？
您是否尝试过修复背景图像，使其左右和上下对称？
类名中的错字：mbBtnRightSection 而不是 mbBtnRightSection