CSS + Bootstrap - 如何扩展图像以响应答案

【问题标题】：CSS + Bootstrap - How to expand image to be responsiveCSS + Bootstrap - 如何扩展图像以响应
【发布时间】：2017-01-10 07:34:42
【问题描述】：

我有一张图片，我希望将其右侧图案展开到容器右侧的末端。我的图像有一个特殊性，比如下面的星星，所以我不能简单地重复它。我只希望水平粉红色部分继续。我的真实图像没有可以使用背景颜色获得的颜色，我需要实际图像响应容器的大小。谁能帮帮我？

我目前的解决方法是对所有部分（容器、导航栏、图像、行）使用固定宽度，但我希望我的网站能够在没有固定宽度值的情况下全部响应。

按照评论者的提示，我已经达到了最终结果。

.OutterDiv{
    position: relative;
    left: 0;
    top:0;
}
.OutterDiv .responsiveImage{
    background-position: left top;
    background-image: url('address1');
    background-repeat: repeat;
    position: relative;
    top: 0; 
    left: 0;
}

.OutterDiv .nonResponsiveImage {
    background-position: left top;
    color: #FFF !important;
    background-image: url('address2');
    background-repeat: no-repeat;
    margin-bottom: 0 !important;
    width: 960px;
    position:absolute;
    top: 0; 
    left: 0;
}

【问题讨论】：

可能有 2 张图片？一个反应灵敏，另一个具有特殊性？如果你让它响应，星星也会增加它的宽度。

标签： css image twitter-bootstrap responsive

【解决方案1】：

我有我的答案。

.OutterDiv{
    position: relative;
    left: 0;
    top:0;
}
.OutterDiv .responsiveImage{
    background-position: left top;
    background-image: url('address1');
    background-repeat: repeat;
    position: relative;
    top: 0; 
    left: 0;
}

.OutterDiv .nonResponsiveImage {
    background-position: left top;
    color: #FFF !important;
    background-image: url('address2');
    background-repeat: no-repeat;
    margin-bottom: 0 !important;
    width: 960px;
    position:absolute;
    top: 0; 
    left: 0;
}

【讨论】：