Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
Другие темы раздела
HTML, CSS Как применить стиль к браузерам Opera, Chrome (webkit) http://www.cyberforum.ru/html/thread1692585.html
Приветствую столкнулся с проблемой. Есть css свойства: .first-scr-tel { position:absolute; right:353px; top:74px; } На браузерах webkit объект сильнее смещен вправо чем нужно. Пробовал...
HTML, CSS Вывести css файл на сайт с возможностью редактирования Здравствуйте, подскажите пожалуйста есть ли такая возможность вообще? Информации в интернете ноль. Хотелось бы вывести css файл на сайт, для возможности редактирования стиля сайта, прямо с сайта. http://www.cyberforum.ru/html/thread1692577.html
Упорядочить вывод в две колонки и больше чекбоксы HTML, CSS
Привет есть код в котором выводятся чекбоксы: <style type="text/css"> .two{ background: blue; height: 30px; width: 50%; } </style> <form> <span class="one">
кнопка поиска в поисковой строке HTML, CSS
Помогите, пожалуйста, понять что не так, не могу поднять кнопку поиска на нужный уровень https://jsfiddle.net/n5mnk6zr/
HTML, CSS Hover двум элементам http://www.cyberforum.ru/html/thread1692249.html
Нужно - при наведении на кнопку меняется background и обводка / подчеркивание. Получилось - при наведении на тело кнопки появляется фон и обводка, при наведении на саму ссылку (текст) -...
HTML, CSS Блок с пропорциями 16:9 Добрый день. Как в css правильно задать div-блоку свойства таким образом, чтобы он постоянно сохранял соотношение сторон 16:9? подробнее
halkGreen
1 / 1 / 2
Регистрация: 23.03.2016
Сообщений: 7
23.03.2016, 15:50 0

резиновый макет и масштабируемое img

23.03.2016, 15:50. Просмотров 811. Ответов 15
Метки (Все метки)

Ответ

Для адаптивное верстки советую изучить модульные сетки и сделать свою что-бы понять как это работает,
Методом пальца будет долго и не получитса изминить элемент сайта без копания в верстки.

Адаптивное изображение например так

<div class=img></div> <!-- Пустой блок -->

CSS

.img {
min-height: 150px; /* высота вашего изображения */
background: url(http://placehold.it/1200x150) 50% no-repeat; /* в процентах задаем смещение по осям */
margin: 0px 20px;
}


Потянуть окно браузера для наглядности.

Для телефона создаем медиа запрос с другим размером бекграунд

Пишем в CSS

@media (max-width: 768px) {
.img {
background: url(http://placehold.it/760x150) 10% no-repeat;
}


При уменьшении окна браузера меньше 768px фоновое изображение будет переопределено на 780x150 вместо 1200х750

Смещения фона в процентах дает нам управление над отображением нужной нам точки изображения на любом экране

Вернуться к обсуждению:
резиновый макет и масштабируемое img
0
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
23.03.2016, 15:50

Самый оптимальный резиновый макет?
Всем доброго времени суток, я совсем не давно начал углубляться в html/css....

Блочная верстка (резиновый сайт), подскажите как сделать такой макет (см. рисунок)?
я думаю что по цветам можно легко распознать что является контейнером, а что...

Как поменять картинку при наведении мышью на элемент ? т.е <img> to <img>
есть например вот такой вот код: &lt;div class=&quot;row&quot;&gt; &lt;div...

0
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru