Блог

В этом примере <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; }
  

Я не знаю чистого 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);
  

Вот демонстрация этого.

Примечания

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

Демонстрация этого в действии.

Вы могли бы создать два класса css, которые описывают два желаемых размера / версии. Вы можете использовать jquery для определения размера браузера, а также добавлять и удалять соответствующие классы css по своему вкусу.

Фоновые изображения не масштабируются, как изображения ( <img> теги). Измените логотип 20% на an <img> , затем измените его размер, как вы делаете изображение большего размера. Размер шрифтов может быть выражен в процентах, поэтому попробуйте установить размер шрифта равным 120%.

Чтобы изменить размер текста, создайте блок, в котором он содержится в CSS. например: тело, основной, нижний колонтитул и т. Д. Затем Просто используйте команду font-size . Вот так

     body {
Font-size:1.1EM;
}
  

Для изображения просто задайте размер, который требуется для изображения, хотя я рекомендую уменьшить размер файла изображения, поскольку это сэкономит место в памяти.