Я не знаю чистого CSS-способа сделать это, но с небольшим количеством jQuery это возможно следующим образом:
/* Original width of the description element */
var origWidth = $('.description').width();
/* Function to set the font size of description. Based on its current width
compared to its original width. The * 70 is a factor you can use to increase
or decrease the calculated font size. */
var setFontSize = function(){
var $desc = $('.description');
$desc.css({fontSize: $desc.width()/origWidth * 70 + "%"});
}
/* Set the font size on load and when the viewport resizes */
setFontSize();
$(window).resize(setFontSize);
Вот демонстрационная версия .
Примечания
Выше предполагается, что все .description элементы имеют одинаковую ширину.
Вы можетеулучшить внешний вид скрипта, скрывая текст, пока размер шрифта не будет рассчитан при загрузке.Это предотвратит скачок размера шрифта, который вы видите перед первым вызовом setFontSize().
Если вы хотите улучшить соотношение размеров шрифта (вместо того, чтобы полагаться на коэффициент * 70 с жестким кодом)), вы можете использовать функцию при загрузке, которая рассчитывает максимально возможное пространство для текста в вашем .description.Затем вы можете использовать это значение для определения коэффициента.
Обновлено: Новая версия кода, которая также изменяет размер зеленой процентной скидки на текст и изображение.
HTML
<ul>
<li>
<!-- Green circle background has been changed to an <img>. Now it
can be scaled as the size changes. It is absolutely positioned
behind the percentage text. -->
<span class="percent">
<img src="http://i.imgur.com/9cfK5.png"/>
<span class="rotate">20%</span>
</span>
<img src="http://lorempixum.com/100/200/">
<span class="description">Good Product</span>
</li>
<!-- Remaining items -->
</ul>
CSS
/* Container that holds percent text and green circle <img> */
.percent {
content: '';
position:absolute;
right:-15px;
top:-2px;
height: 45px;
width: 45px;
/* Vertically center percent text */
line-height: 45px;
font-size: 100%;
}
/* Green circle image */
.percent img {
/* Grow/shrink as .percent size changes */
width: 100%;
height: auto;
/* Absolutely position behind percentage text */
position: absolute;
z-index: 1;
top: 0;
left: 0;
}
.rotate {
/* Positions percent text above green circle <img> */
position: relative;
z-index: 2;
/* Keeps text centered as size changes */
display: block;
text-align: center;
/* remaining rules */
}
jQuery
/* Get common element references */
var $desc = $('.description');
var $percent = $('.percent');
/* Store the original values. We'll use these to smoothly change the size */
var orig = {
description: $desc.width(),
percent: $percent.width(),
right: parseInt($percent.css('right'), 10)
};
/* Sets font sizes and changes green circle image size and position */
var setFontSize = function(){
/* Get the percent of size change */
var change = $desc.width()/orig.description;
/* Update the .description font-size */
$desc.css({
fontSize: change * 100 + "%"
});
/* Update the following .percent properties:
1. font-size
2. width: to grow/shrink green circle image
3. line-height: to keep percent text vertically centered
4. right: keeps .percent container in the same proportional position */
$percent.css({
fontSize: change * 100 + "%",
width: orig.percent * change + "px",
lineHeight: orig.percent * change + "px",
right: orig.right * change + "px"
});
}
/* Set the font size on load and when the viewport resizes */
setFontSize();
$(window).resize(setFontSize);
Демонстрация этого в действии.