如何重新调整文本和css背景图像，如<img/>正在重新调整大小？

Question

在此示例中<img>正在根据需要重新调整大小

修改：重新添加 http://jsfiddle.net/jitendravyas/yBkFL/

但我也想重新标记折扣标签和文字。如果我将浏览器窗口的大小调整为小尺寸，那么折扣标签20％和文本“Good Product”也应该重新调整尺寸。

我需要兼容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因子），您可以在加载时使用一个函数来计算{{1}中文本的最大可能空间}}。然后，您可以使用此值来确定因子。

已更新：新版本的代码也会调整绿色百分比折扣文字和图片的大小。

<强> HTML

.description

<强> CSS

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

<强>的jQuery

/* 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 */
}

Demo of it正在行动中。

Answer 2

您可以创建两个css类来描述您想要的两个大小/版本。您可以使用jquery来检测浏览器大小，并根据自己的喜好添加和删除相应的css类。

Answer 3

背景图片不像图像（<img>标签）那样自行重新缩放。将20％徽标更改为<img>，然后在放大图像时调整大小。字体的大小可以设为百分比，因此请尝试将字体大小设置为120％。

Answer 4

要调整文本大小，请在CSS中创建包含哪个块。例如：Body，Main，Footer等，然后只需使用 font-size 命令。像这样

    body {
Font-size:1.1EM;
}

对于图像，只需设置想要图像的尺寸，虽然我建议将图像文件缩小，因为这样可以节省存储空间。