javascript - 如何重新调整文本和 css 背景图像的大小，例如 在此示例中正在重新调整大小？

Question

在这个例子中 <img>正在按我的意愿调整大小

编辑:重新添加 http://jsfiddle.net/jitendravyas/yBkFL/

但我还想重新调整折扣标签和文本的大小。如果我将浏览器窗口的大小重新调整为小尺寸，那么折扣标签 20% 和文本“好产品”也应该重新调整大小。

我需要与 IE8 和 9 以及最新的 firefox、Chorme 和 iPad safari 兼容

我只想使用 CSS，但如果不可能，则可以使用 javascript/jquery。兼容性很重要。

HTML和CSS的重要部分

HTML(已编辑)

<ul>
 <li>
   <span class="twenty-percent">
     <span class="rotate">20%</span>
   </span>
     <img src="image.jpg">
   <span class="description">Good Product</span>
 </li>
</ul>

CSS(已编辑:)

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

Answer 1

我不知道有什么纯 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);

Here's a demo

注意事项

1. 以上假定所有 .description 元素的宽度相同。

2. 您可以通过在加载时计算字体大小之前隐藏文本来改善脚本的外观。这将防止您在第一次调用 setFontSize() 之前看到的字体大小跳跃。

3. 如果您想提高字体大小比率(而不是依赖于硬编码的 * 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);

Demo of it在行动中。