How to re-size text and css background image like <img> is re-sizing in this example?

In this example <img> is re-sizing as I want

Edit: re-added http://jsfiddle.net/jitendravyas/yBkFL/

But I also want to re-size Discount tag and text. if I re-size the browser window to small size then Discount tag 20% and text "Good Product" should also re-size.

I need compatibility with IE8 and 9 and latest firefox, Chorme and iPad safari

I would like to do with CSS only but if it's not possible then use of javascript/jquery is ok. Compatibility is important.

Important part of HTML and CSS

HTML (edited)

<ul>
 <li>
   <span class="twenty-percent">
     <span class="rotate">20%</span>
   </span>
     <img src="image.jpg开发者_如何学JAVA">
   <span class="description">Good Product</span>
 </li>
</ul>

CSS (Edited:)

    li {
    float: left;
    width: 18%;
    padding: 0;
    position: relative;
    float: left;
    margin: 15px;
    background: yellow;
    display: inline }

img { width: 100%; }

li img { display: block; }

.twenty-percent {
    content: '';
    background:url(http: //i.imgur.com/9cfK5.png) no-repeat;
    position: absolute;
    right: -15px;
    top: -2px;
    width: 45px;
    height: 45px; }

.description {
    display: block;
    font-size: 120%; }

.rotate {
    color: #FFFFFF;
    font-size: 16px;
    font-weight: bold;
    padding-right: 10px;
    position: absolute;
    right: -5px;
    text-shadow: 0 1px 1px #000000;
    top: 9px; }

---

I don't know of a pure CSS way to do it, but with a bit of jQuery, it's possible as follows:

/* 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);

Here's a demo of it.

Notes

1. Above assumes all .description elements are same width.

2. You could improve the appearance of the script by hiding the text until the font size was calculated on load. This would prevent the font size jump you see before the first call to setFontSize().

3. If you wanted to improve the font size ratio (rather than rely on the hardcoded * 70 factor), you could use a function on load that calculated the maximum possible space for text in your .description. Then you could use this value to determine the factor.

Updated: New version of the code that resizes the green percentage discount text and image as well.

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);

Demo of it in action.

---

You could create two css classes that describe the two sizes/versions that you want. You can use jquery to detect the browser size and add and remove the appropriate css classes to your liking.

---

Background images do not rescale themselves like images (<img> tags). Change the 20% logo to an <img>, then size it as you do the larger image. Fonts can be sized as percents, so try setting the font-size to 120%.

---

To resize text, create the block of whichit is contained within in CSS. for example: Body, Main, Footer etc. then simply use the font-size command. Like so

    body {
Font-size:1.1EM;
}

For the image, simply set the dimension which the want the image to be, although I recommend making the image file smaller, since this will save memory space.