Большая картинка в меньшем диве

[hokil]

Доброго времени суток!

Не знаю как сделать лучше. Есть большая картинка размером 100*100px, и есть маленький div 50*50px. Как сделать чтобы картинка отображалась в нем полностью?

Привожу свой кривой код.

html:

<div id="wrap_button">

<a class="screen_button" href="#"></a>

</div>

css:

div#wrap_button { width: 50px; height: 50px; }

a.screen_button { display: block; background: url(images/button.png) no-repeat; height: 100%; width: 100%; }

P.S. <img /> вставлять не желательно, так как при наведении на ссылку должна меняться картинка.

Буду благодарен за помощь.

[Great Rash]

Ну и изврат...

div#wrap_button { width: 50px; height: 50px; }
a.screen_button { display: block; background: url(images/button.png) no-repeat; height: 200%; width: 200%; margin: -100% 0 0 -100%;}

Есть сомнения на счет работоспособности в ИЕ7.

[stars]

В css3 есть background-size...

Вашу проблему можно решить еще такими способами как JS (есть события onmouseover) ну или использовать старый добрый css 2.1 и просто пережать картинку фоновую под размеры дива...

[hokil]

div#wrap_button { width: 50px; height: 50px; }

a.screen_button { display: block; background: url(images/button.png) no-repeat; height: 200%; width: 200%; margin: -100% 0 0 -100%;}

Есть сомнения на счет работоспособности в ИЕ7.

Картинка получается больше дива, а она должна полностью в нем помещаться.

просто пережать картинку фоновую под размеры дива...

Проблема в том, что размеры дива изменяются в зависимости от размера окна браузера...

[psywalker]

Доброго времени суток!

Не знаю как сделать лучше. Есть большая картинка размером 100*100px, и есть маленький div 50*50px. Как сделать чтобы картинка отображалась в нем полностью?

Привожу свой кривой код.

html:

<div id="wrap_button">

<a class="screen_button" href="#"></a>

</div>

css:

div#wrap_button { width: 50px; height: 50px; }

a.screen_button { display: block; background: url(images/button.png) no-repeat; height: 100%; width: 100%; }

P.S. <img /> вставлять не желательно, так как при наведении на ссылку должна меняться картинка.

Буду благодарен за помощь.

А ты вставляй имгу в ссылку и меняй её при наведении.

[stars]

Честно говоря затея весьма странная, неужели это так необходимо? Возможно просто сделать картинку которую можно будет повторять на всю длину дива?

Edited June 17, 2011 by stars

[sigma77]

Картинка получается больше дива, а она должна полностью в нем помещаться.

Т.е. размер картинки должен уменьшаться или увеличиваться в зависимости от размера дива?

[klierik]

P.S. <img /> вставлять не желательно, так как при наведении на ссылку должна меняться картинка.

Буду благодарен за помощь.

Кроссбраузерно никак.

А вообще есть background-size

но лучше уж подрезать картинку.

Или же картинку фоном в отдельный элемент.

[hokil]

А ты вставляй имгу в ссылку и меняй её при наведении.

Тоже об этом думал, но как-то не очень удобно получается.

Честно говоря затея весьма странная, неужели это так необходимо? Возможно просто сделать картинку которую можно будет повторять на всю длину дива?

Других вариантов я не вижу. Картинка представляет собой круг, так что растянуть не получается.

Т.е. размер картинки должен уменьшаться или увеличиваться в зависимости от размера дива?

Необязательно чтобы менялся размер картинки, главное чтобы она полностью отображалась в диве, независимо от его размера.

[sigma77]

Необязательно чтобы менялся размер картинки, главное чтобы она полностью отображалась в диве, независимо от его размера.

Я говорю о размере физическом, т.е. самого файла. Я говорю о размере сторон у картинки. Т.е. о том, что будет видно в браузере.

Кроссбраузерно без <img> не сделаешь.

С <img> можно сделать так: http://jsfiddle.net/9VNKr/

[stars]

Что там за круг? Просто если это какая то фотография тарелки то это серьезно ))) Если это просто круг то можно попробовать векторную графику. Или допустим задать минимальный размер div выставить ваш круг по центру относительно минимального размера а дальше при увеличении круг оставлять в центре (без изменений)

[sigma77]

Что там за круг? Просто если это какая то фотография тарелки то это серьезно ))) Если это просто круг то можно попробовать векторную графику. Или допустим задать минимальный размер div выставить ваш круг по центру относительно минимального размера а дальше при увеличении круг оставлять в центре (без изменений)

http://jsfiddle.net/9VNKr/1/

Только в сафари не работает...

Upd. А так вроде работает http://jsfiddle.net/9VNKr/2/

Edited June 17, 2011 by sigma77

[hokil]

Кроссбраузерно без <img> не сделаешь.

С <img> можно сделать так: http://jsfiddle.net/9VNKr/

Скорей всего так и сделаю, благодарю за помощь.

Что там за круг? Просто если это какая то фотография тарелки то это серьезно ))) Если это просто круг то можно попробовать векторную графику. Или допустим задать минимальный размер div выставить ваш круг по центру относительно минимального размера а дальше при увеличении круг оставлять в центре (без изменений)

Примерно такой круг: http://s54.radikal.ru/i143/1106/3c/e95b48463204.jpg

Конечно же без Хауса. =)