1

Недавно был заказ сверстать сайт, где на главной странице распологались герои журнала. И эти герои и есть навигационное меню. Соответственно вырезал картинку и загнал ее в линк так:

<a href="#"><img src="img/picture.jpg" /></a>

Все выровнил, как пологается т.е сделал прилепающий футер и если высота экрана не меньше 800 пикселей, то масштабирование происходит на ура, но переходим на ноутбук диагональ которого 15. Появляется скролл-принял решение уменьшить картинки и подгружать их через CSS3

@media all and (max-width: 800px)

и тут должен идти другой стиль для данного разрешения.

Вопрос: как мне в CSS можно в тэг <img> загнуть другую картинку, ту, что поменьше масштабом? (кажется, это адаптивная верстка называется)

6
  • Пробовали читать про адаптивную верстку в ИНТЕРНЕТЕ? 29 мар 2013 в 9:33
  • конечно, и причем я ее использую. У меня конкретный вопрос ведь... как в тег <img> загнать другую картинку через CSS если высота экрана стала меньше чем 800 пикселей! Без скриптов!
    – nosensus
    29 мар 2013 в 9:35
  • В бутстраповском мануале есть все для понимания данного вопроса. twitter.github.com/bootstrap/scaffolding.html#responsive 30 мар 2013 в 7:02
  • >был заказ Ну так и сделай это заказ. Или оплати работу.
    – user6550
    30 мар 2013 в 18:40
  • а что если всех "героев" разместить в дивах .horovodov { width:300px;height:500px; float:left; background:url('images/norm.png'); } далее @media all and (max-width: 800px) { .horovodov { width:150px;height:250px; background:url('images/small.png'); } }
    – Cone
    30 мар 2013 в 19:42

4 ответа 4

2

Попробуйте так:

HTML

<a href="#"><img id="adaptive" src="img/picture.jpg" /></a>

CSS

#adaptive{
    content:url("img/small_picture.jpg");
}

Подробнее

2
  • хорошо спасибо попробую результат сообщу позже )
    – nosensus
    29 мар 2013 в 9:49
  • нет к сожаление не получилось.
    – nosensus
    29 мар 2013 в 16:28
1

Ага, ну да:

Applies to::before and ::afterpseudo-elements

Вот так работает везде (ie 9+, ff 19, chrome 25)

<style>

.adaptive-image:after { content: url('image-def.jpg'); }

@media screen and (min-width: 800px) {
    .adaptive-image:after { content: url('image-800.jpg'); }
}
@media screen and (min-width: 1024px) {
    .adaptive-image:after { content: url('image-1024.jpg'); }
}

</style>
<div class="adaptive-image"></div>

Но тогда уж лучше background ставить.

2
  • то что можно подменить сам бекграунд это не проблема и это работает. но как я понял погуглив вчера, что самому тегу IMG его SRC заменить без скрипта просто не возможно. Придется переделать на бекграунд ссылке, а тег IMG удалить.
    – nosensus
    30 мар 2013 в 7:21
  • Я даже рад этому, ибо CSS — таблица стилей. Как по-мне, то даже псевдоэлементы :after и :before уже несколько выходят за рамки возложенной на CSS задачи, что только привносит путаницу.
    – Bars
    30 мар 2013 в 17:26
1

Используй HTMLscale и все картинки и щрифт на сайте будет подстраиваться под ширину экрана link text

1

Не надо пихать картинку с помощью тега, так трудно управлять им. Создай блок и истанови заливку картинкой. background-size: cover; попробуй для такого блока. Так же можешь попробовать с background-size свойство, на оно не везде используется background-repeat.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.