动态调整div背景图像宽度

Question

<div class="ndnmpricetag-container"><div class="ndnmpricetag price">15.00$</div></div>

<div class="ndnmpricetag-container"><div class="ndnmpricetag">500000.00$</div></div>

ndnmpricetag-container使用静态background图片。使用大数字时（如第二个示例），图像对于数字来说太小了。

如何调整ndnmpricetag-container background宽度，具体取决于width的{​​{1}}？

完整的CSS和示例here。

Answer 1

您现在尝试使用此Css

.ndnmpricetag-container {
    text-align: left;
    display: inline-block;
    vertical-align: top;
    height: 53px;
    background: url('http://www.ni-dieu-ni-maitre.com/images/pricetag.png');
    background-size: 100% 54px;
    padding: 0 50px 0 7px;
    font-size: 16px;
}

<强>演示

.ndnmpricetag-container {
text-align: left;
    display: inline-block;
    vertical-align: top;
    height: 53px;
    background: url('http://www.ni-dieu-ni-maitre.com/images/pricetag.png');
    background-size: 100% 54px;
    padding: 0 50px 0 7px;
    font-size: 16px;
}

.ndnmpricetag {
position: relative; 
top: 7px; 
margin-left: 7px;
margin-right: 7px;
font-face: Helvetica;
font-size:1.2em;
white-space: nowrap;
letter-spacing: -1px;
font-weight:bold;
}

<div class="ndnmpricetag-container"><div class="ndnmpricetag price">15.00$</div></div>

<div class="ndnmpricetag-container"><div class="ndnmpricetag price">500000.00$</div></div>

Answer 2

您需要进行以下更改：

1. 将display的{​​{1}}属性更改为.ndnmpricetag-container，以便不占用所有块的宽度。要将inline-block放在下一行，请在HTML中使用div标记。
2. 将< br/> .ndnmpricetag-container等于min-width说image width。这将确保图像不会因非常小的宽度而被裁剪。
3. 提供100px。
4. 将background-size:100% 100%;提供给padding-right: 35px;，以便图片末尾的箭头能够包含数字，并且文字有足够的空间在图像内进行调整。

请参阅updated link

请参阅下面的屏幕截图：

Answer 3

使用长图像并使用＆＃39;滑动门技术＆＃39;。

https://css-tricks.com/snippets/css/perfect-css-sprite-sliding-doors-button/

Answer 4

您可以让:before伪元素包含元素的开头，:after包含元素的结尾。而自我元素包含重复的中间背景。

＆＃13;

＆＃13;

.a {
  background: url('http://www.ni-dieu-ni-maitre.com/images/pricetag.png') repeat-x left center;
  display: inline-block;
  position: relative;
  margin-left: 10px;
  margin-right: 35px;
}
.a:before {
  content: '';
  width: 10px;
  height: 100%;
  position: absolute;
  left: -10px;
  top: 0;
  display: block;
  background: url('http://www.ni-dieu-ni-maitre.com/images/pricetag.png') no-repeat left center;
}
.a:after {
  content: '';
  width: 35px;
  height: 100%;
  position: absolute;
  right: -35px;
  top: 0;
  display: block;
  background: url('http://www.ni-dieu-ni-maitre.com/images/pricetag.png') no-repeat right center;
}

＆＃13;

<div class="a">15464%</a>

＆＃13;

＆＃13;

＆＃13;