динамическая регулировка 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-containerbackground ширина в зависимости от width от ndnmpricetag?

Полный css и примеры here.

Answer 1

Вам необходимо сделать следующие изменения:

1. Измените display свойство из .ndnmpricetag-container в inline-block так, что он не принимает все ширины блока. Сделать div место в следующей строке, используйте < br/> тег в HTML.
2. Дайте .ndnmpricetag-container a min-width, равным image width, скажем 100px. Это гарантирует, что изображение не будет обрезано для очень малой ширины.
3. 0дальск: background-size:100% 100%;.
4. Дайте padding-right: 35px; по номеру .tondnmpricetag, чтобы стрелки в конце вашего изображения могли содержать номера, а текст - достаточно места для регулировки внутри изображения.

См updated link

Смотрите скриншот ниже:

Answer 2

Привет теперь попробуйте эту 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; 
} 

Demo

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

Используйте длинное изображение и использовать 'Sliding технику дверей'.

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

Answer 4

Вы можете иметь :before псевдо элемент содержит начало элемента, :after содержать конец элемента. И элемент self содержит повторяющийся средний фон.

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

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