css своп изображения с размером

Question

Я искал здесь, похоже, не нашел решения. Я знаю, «как» по существу делать мыши с помощью jQuery, если я использую реальный объект «изображения» и правильно изменяю изображение, я просто пытаюсь выяснить, есть ли способ сделать то же самое с CSS и использовать определенный класс с фоном URL.

Вот мой код & CSS:

.sample #img_id { 
    width: 80px; 
    height: 80px; 
    background: url('sample.gif') left no-repeat top; 
} 

.sample #img_id:hover { 
    width: 80px; 
    height: 80px; 
    background: url('sample-mouseover.gif') left no-repeat top; 
} 

, а затем мой HTML код:

<div class="sample"> 
    <div id=img_id></div> 
</div> 

Теперь - если изображение сказать 200 пикселей на 200 пикселей - изображение не меняет размер. (I.e., это будет «переполнение»). Я ожидал, что изображение будет изменено до 80px x 80px.

Я также попытался это:

.sample img { 
    width: 80px; 
    height: 80px; 
    background: url('sample.gif') left no-repeat top; 
} 

.sample img:hover { 
    width: 80px; 
    height: 80px; 
    background: url('sample-mouseover.gif') left no-repeat top; 
} 

, а затем мой HTML-код:

<div class="sample"> 
    <img src=sample.gif> 
</div> 

Но это не работает. «Начальное» изображение «правильно изменено» (т. Е. До 80 х 80 пикселей), но с наведением мыши изображение будет 200 пикселей x 200 пикселей (т. Е. Без изменения размера).

Как получить изображение с образцом, соответствующим образом измененное/масштабированное, чтобы соответствовать 80x80px на мыши с помощью CSS? (Как я уже сказал, я понял это через jQuery, я просто считаю, что должно быть простое решение с CSS, и не совсем уверен, как правильно его изменить).

Спасибо!

Answer 1

background-size The собственности позволяет изменять размеры фонового изображения, unless вам это нужно, чтобы работать в IE8 и, возможно, Opera Mini.

Answer 2

возможно синтаксис, он работает на этом fiddle