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

@Evgeniy55 · Регистрация: 14.03.2014

Author24 — интернет-сервис помощи студентам

Добрый день, собираюсь из psd сверстать резиновый макет, столкнулся пока что с такой дилеммой:

1) вначале нужно создавать фикс макет и исходя из этих пропорций уже высчитывать проценты на резиновый...или методом тыка сразу создавать резиновый ?

2) как быть с резиновыми img, если задать img {max-width:100%}, оно то будет масштабироваться, но пользователю с мобильного устройства прийдется загружать исходник большого размера, что не есть хорошо, в книге Бена Фрейна 2 издание за 2015г я встретил такой вариант:
<img src="scones_small.jpg" srcset="scones_medium.jpg 1.5x, scones_large.jpg 2x" alt="Scones taste amazing">,
есть еще расширеные значения с указанием размера картинки, и насколько я понял браузер автоматически должен выбрать необходимого размера картинку, так ли это ? и нужно ли еще что то прописывать в <meta> ? как вообще посоветуйте реализовать масштабируемое img под разные размеры экрана ? если можно, то на примере

@halkGreen · 23.03.2016, 15:50

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

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

<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

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

@Evgeniy55 · 27.03.2016, 13:31 **[ТС]**

Сообщение от halkGreen

При уменьшении окна браузера меньше 768px фоновое изображение будет переопределено на 780x150 вместо 1200х750
Смещения фона в процентах дает нам управление над отображением нужной нам точки изображения на любом экране

попробовал как вы описали:

<div><p>Текст</p></div>
<div class="img"></div>
<div><p>Нижний блок</p></div>
/////////////////////////////////////////////////////////////////////
.img{
background: url("img/scones.jpg") 50% no-repeat;
width:100%;
height: 1045px;
margin:0 20px;
}
@media (max-width: 768px){
.img{
background: url("img/SOC-Logo.png") 10% no-repeat; /* изображение маленькое */
}
}

получился один нюанс и не получается его разрешить, когда уменьшаю окно браузера чтобы появилось маленькое img, то вместе с ним появляются и большие отступы которые зарезервированы под большую картинку

@Evgeniy55 · 27.03.2016, 13:45 **[ТС]**

css код этот имел ввиду:
.img{
background: url("img/scones.jpg") 50% no-repeat;
min-height: 1045px;
margin:0 20px;
}
@media (max-width: 768px){
.img{
background: url("img/SOC-Logo.png") 10% no-repeat; /* изображение маленькое */
}
}

@halkGreen · 28.03.2016, 00:07

Переназначить отступ так же как картинку

@media (max-width: 768px){
.img{
background: url("img/SOC-Logo.png") 10% no-repeat; /* изображение маленькое */
margin: 0; /*Отступы со всех сторон 0px */
}

p.s(переназначить можно любое значение или добавить новое свойство,например-добавить рамку чему либо на мобильных устройствах )

@Evgeniy55 · 28.03.2016, 00:57 **[ТС]**

Сообщение от halkGreen

p.s(переназначить можно любое значение или добавить новое свойство,например-добавить рамку чему либо на мобильных устройствах )

я этот вариант пробовал, он не помогает, но что интересно, если уменьшать min-height большой картинки, для мониторов которая, то сразу уменьшается вертикальный отступ маленькой картинки, т.е. этот отступ я смог отрегулировать только уменьшением высоты большой картинки, вообщем нормально получается когда высота большой и маленькой img идентична, а как тогда сделать чтобы при разной их высоте небыло отступа из за самой высокой img ?

думаю проще тут глянуть: https://fiddle.jshell.net/evgeniyproweb/ak8t2kzg/

@halkGreen · 28.03.2016, 01:43

Совет:Указывайте бордер если не попятно расположение элемента и занимаемое им место.
Марджин 0 работает.
Изображение это не блок а фон а как знаем фону отступы нельзя задать и на паддинг он плевал.но можно позиционировать внутри блока по двум осям 0% 0%.(не только в процентах).

https://fiddle.jshell.net/La9apxbb/

Высота не может влиять на величину внешних отступов это не логично.

@Evgeniy55 · 28.03.2016, 02:41 **[ТС]**

Сообщение от halkGreen

Марджин 0 работает.
Изображение это не блок а фон а как знаем фону отступы нельзя задать и на паддинг он плевал.но можно позиционировать внутри блока по двум осям 0% 0%.(не только в процентах).

позиционирование по обеим осям тоже делал, картинка то прибилась к верхнему левому углу контейнера, но от картинки(фона) до нижнего контейнера остается большой отступ который вызван высотой фона большего(визуально скрытого) размера img, вот как сделать чтобы при смене фонового изображения на меньший размер, нижний контейнер был под ним и без этого отступа ? т.е. как-то обнулить размеры большой img

вообщем насколько я понял это никак не решить, покрайней мере без JS, и прийдется делать картинки для фона с одинаковой высотой, но просто с разным качеством, верно ?

Добавлено через 5 минут
все разобрался, нужно было для медиа запроса тоже задать высоту, спасибо вам за помощь

@halkGreen · 28.03.2016, 13:06

https://fiddle.jshell.net/La9apxbb/

@Evgeniy55 · 28.03.2016, 13:21 **[ТС]**

Сообщение от halkGreen

https://fiddle.jshell.net/La9apxbb/

да..все так сделал как вы показали..только одну строчку дописал внизу и плучилось то что надо
https://fiddle.jshell.net/evge... a9apxbb/4/

а вообще хотелось бы чтобы изображения масштабировались как при max-height:100%, но вместе с медиа запросом как в вашем варианте, т.е. картинка плавно уменьшается до размера экрана в 768 px, затем меняется на такую же картинку но уже для мобильных девайсов которая также плавно уменьшается или увеличивается.

Чтобы такое реализовать мне нужно покапаться в теме "Оптимизация верстки под retina дисплеи" ? если нет, то подскажите в каком направлении смотреть

@halkGreen · 28.03.2016, 13:30

Так что-ли?

https://fiddle.jshell.net/xs2uy10y/

@Evgeniy55 · 28.03.2016, 13:44 **[ТС]**

Сообщение от halkGreen

Так что-ли?
https://fiddle.jshell.net/xs2uy10y/

да, только в добавок при уменьшении окна браузера чтобы картинка еще менялась как в варианте с @media (max-width: 768px)

@halkGreen · 28.03.2016, 14:59

https://fiddle.jshell.net/2quw2egd/

Вам нужно учить базу.
советую в день по 1 курсу нтмльакадемии по порядку.

@Evgeniy55 · 28.03.2016, 15:57 **[ТС]**

Сообщение от halkGreen

https://fiddle.jshell.net/2quw2egd/
Вам нужно учить базу.
советую в день по 1 курсу нтмльакадемии по порядку.

да..вот это оно..спасибо огромное,
хтмл академию и кодскул давненько проходил и практиковался на верстке фикс макетов, похоже нужно еще раз пробежаться по необходимым разделам, сейчас скачал 2 psd макета и хочу попробовать сверстать адаптивные, или по крайней мере flex, единственное я не проходил на хтмлакадеми и кодскуле там где платный контент и не знаю стоит ли платить за него и есть ли там что то необходимое ?

насчет модульных сеток о которых вы писали, я покопался в инете, насколько понял на фотошоп можно скачать плагин или что то подобное

@halkGreen · 28.03.2016, 18:36

Адаптивный дизайн требует времени для изучения.
Сетки пишут на css об этом есть целый курс в академии правда довольно скудный но для самых азов пойдет.
Больше ютуба и гугла вам в помощь.когда поймете как работает сетка беритесь за бустрап.

@Evgeniy55 · 28.03.2016, 19:07 **[ТС]**

Сообщение от halkGreen

Адаптивный дизайн требует времени для изучения.
Сетки пишут на css об этом есть целый курс в академии правда довольно скудный но для самых азов пойдет.
Больше ютуба и гугла вам в помощь.когда поймете как работает сетка беритесь за бустрап.

теперь понял о каких сетках вы говорите, на бутстрапе я как то делал сайт, с применением cols/rows и максимум 12 там наскок помню..... вообщем почитаю как самому создать эту сетку

@halkGreen 1 / 1 / 2 Регистрация: 23.03.2016 Сообщений: 7
	28.03.2016, 13:30	11
	Так что-ли? https://fiddle.jshell.net/xs2uy10y/ 0

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

Решение

Решение

@Evgeniy55 108 / 102 / 35 Регистрация: 14.03.2014 Сообщений: 586
		1
	резиновый макет и масштабируемое img 23.03.2016, 15:16. Показов 3428. Ответов 15 Метки нет (Все метки) Добрый день, собираюсь из psd сверстать резиновый макет, столкнулся пока что с такой дилеммой: 1) вначале нужно создавать фикс макет и исходя из этих пропорций уже высчитывать проценты на резиновый...или методом тыка сразу создавать резиновый ? 2) как быть с резиновыми img, если задать img {max-width:100%}, оно то будет масштабироваться, но пользователю с мобильного устройства прийдется загружать исходник большого размера, что не есть хорошо, в книге Бена Фрейна 2 издание за 2015г я встретил такой вариант: <img src="scones_small.jpg" srcset="scones_medium.jpg 1.5x, scones_large.jpg 2x" alt="Scones taste amazing">, есть еще расширеные значения с указанием размера картинки, и насколько я понял браузер автоматически должен выбрать необходимого размера картинку, так ли это ? и нужно ли еще что то прописывать в <meta> ? как вообще посоветуйте реализовать масштабируемое img под разные размеры экрана ? если можно, то на примере 0

@halkGreen 1 / 1 / 2 Регистрация: 23.03.2016 Сообщений: 7
	23.03.2016, 15:50	2
	Для адаптивное верстки советую изучить модульные сетки и сделать свою что-бы понять как это работает, Методом пальца будет долго и не получитса изминить элемент сайта без копания в верстки. Адаптивное изображение например так <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 Смещения фона в процентах дает нам управление над отображением нужной нам точки изображения на любом экране 0

@Evgeniy55 108 / 102 / 35 Регистрация: 14.03.2014 Сообщений: 586
	27.03.2016, 13:31 [ТС]	3
	Сообщение от halkGreen При уменьшении окна браузера меньше 768px фоновое изображение будет переопределено на 780x150 вместо 1200х750 Смещения фона в процентах дает нам управление над отображением нужной нам точки изображения на любом экране попробовал как вы описали: <div><p>Текст</p></div> <div class="img"></div> <div><p>Нижний блок</p></div> ///////////////////////////////////////////////////////////////////// .img{ background: url("img/scones.jpg") 50% no-repeat; width:100%; height: 1045px; margin:0 20px; } @media (max-width: 768px){ .img{ background: url("img/SOC-Logo.png") 10% no-repeat; /* изображение маленькое */ } } получился один нюанс и не получается его разрешить, когда уменьшаю окно браузера чтобы появилось маленькое img, то вместе с ним появляются и большие отступы которые зарезервированы под большую картинку 0

@Evgeniy55 108 / 102 / 35 Регистрация: 14.03.2014 Сообщений: 586
	27.03.2016, 13:45 [ТС]	4
	css код этот имел ввиду: .img{ background: url("img/scones.jpg") 50% no-repeat; min-height: 1045px; margin:0 20px; } @media (max-width: 768px){ .img{ background: url("img/SOC-Logo.png") 10% no-repeat; /* изображение маленькое */ } } 0

@halkGreen 1 / 1 / 2 Регистрация: 23.03.2016 Сообщений: 7
	28.03.2016, 00:07	5
	Переназначить отступ так же как картинку @media (max-width: 768px){ .img{ background: url("img/SOC-Logo.png") 10% no-repeat; /* изображение маленькое / margin: 0; /Отступы со всех сторон 0px */ } p.s(переназначить можно любое значение или добавить новое свойство,например-добавить рамку чему либо на мобильных устройствах ) 0

@Evgeniy55 108 / 102 / 35 Регистрация: 14.03.2014 Сообщений: 586
	28.03.2016, 00:57 [ТС]	6
	Сообщение от halkGreen p.s(переназначить можно любое значение или добавить новое свойство,например-добавить рамку чему либо на мобильных устройствах ) я этот вариант пробовал, он не помогает, но что интересно, если уменьшать min-height большой картинки, для мониторов которая, то сразу уменьшается вертикальный отступ маленькой картинки, т.е. этот отступ я смог отрегулировать только уменьшением высоты большой картинки, вообщем нормально получается когда высота большой и маленькой img идентична, а как тогда сделать чтобы при разной их высоте небыло отступа из за самой высокой img ? думаю проще тут глянуть: https://fiddle.jshell.net/evgeniyproweb/ak8t2kzg/ 0

@halkGreen 1 / 1 / 2 Регистрация: 23.03.2016 Сообщений: 7
	28.03.2016, 01:43	7
	Сообщение было отмечено Evgeniy55 как решение Решение Совет:Указывайте бордер если не попятно расположение элемента и занимаемое им место. Марджин 0 работает. Изображение это не блок а фон а как знаем фону отступы нельзя задать и на паддинг он плевал.но можно позиционировать внутри блока по двум осям 0% 0%.(не только в процентах). https://fiddle.jshell.net/La9apxbb/ Высота не может влиять на величину внешних отступов это не логично. 0

@Evgeniy55 108 / 102 / 35 Регистрация: 14.03.2014 Сообщений: 586
	28.03.2016, 02:41 [ТС]	8
	Сообщение от halkGreen Марджин 0 работает. Изображение это не блок а фон а как знаем фону отступы нельзя задать и на паддинг он плевал.но можно позиционировать внутри блока по двум осям 0% 0%.(не только в процентах). позиционирование по обеим осям тоже делал, картинка то прибилась к верхнему левому углу контейнера, но от картинки(фона) до нижнего контейнера остается большой отступ который вызван высотой фона большего(визуально скрытого) размера img, вот как сделать чтобы при смене фонового изображения на меньший размер, нижний контейнер был под ним и без этого отступа ? т.е. как-то обнулить размеры большой img вообщем насколько я понял это никак не решить, покрайней мере без JS, и прийдется делать картинки для фона с одинаковой высотой, но просто с разным качеством, верно ? Добавлено через 5 минут все разобрался, нужно было для медиа запроса тоже задать высоту, спасибо вам за помощь 0

@halkGreen 1 / 1 / 2 Регистрация: 23.03.2016 Сообщений: 7
	28.03.2016, 13:06	9
	https://fiddle.jshell.net/La9apxbb/ 0

@Evgeniy55 108 / 102 / 35 Регистрация: 14.03.2014 Сообщений: 586
	28.03.2016, 13:21 [ТС]	10
	Сообщение от halkGreen https://fiddle.jshell.net/La9apxbb/ да..все так сделал как вы показали..только одну строчку дописал внизу и плучилось то что надо https://fiddle.jshell.net/evge... a9apxbb/4/ а вообще хотелось бы чтобы изображения масштабировались как при max-height:100%, но вместе с медиа запросом как в вашем варианте, т.е. картинка плавно уменьшается до размера экрана в 768 px, затем меняется на такую же картинку но уже для мобильных девайсов которая также плавно уменьшается или увеличивается. Чтобы такое реализовать мне нужно покапаться в теме "Оптимизация верстки под retina дисплеи" ? если нет, то подскажите в каком направлении смотреть 0

	28.03.2016, 19:07

Опции темы

@Evgeniy55 108 / 102 / 35 Регистрация: 14.03.2014 Сообщений: 586
	28.03.2016, 13:44 [ТС]	12
	Сообщение от halkGreen Так что-ли? https://fiddle.jshell.net/xs2uy10y/ да, только в добавок при уменьшении окна браузера чтобы картинка еще менялась как в варианте с @media (max-width: 768px) 0

@halkGreen 1 / 1 / 2 Регистрация: 23.03.2016 Сообщений: 7
	28.03.2016, 14:59	13
	Сообщение было отмечено Evgeniy55 как решение Решение https://fiddle.jshell.net/2quw2egd/ Вам нужно учить базу. советую в день по 1 курсу нтмльакадемии по порядку. 1

@Evgeniy55 108 / 102 / 35 Регистрация: 14.03.2014 Сообщений: 586
	28.03.2016, 15:57 [ТС]	14
	Сообщение от halkGreen https://fiddle.jshell.net/2quw2egd/ Вам нужно учить базу. советую в день по 1 курсу нтмльакадемии по порядку. да..вот это оно..спасибо огромное, хтмл академию и кодскул давненько проходил и практиковался на верстке фикс макетов, похоже нужно еще раз пробежаться по необходимым разделам, сейчас скачал 2 psd макета и хочу попробовать сверстать адаптивные, или по крайней мере flex, единственное я не проходил на хтмлакадеми и кодскуле там где платный контент и не знаю стоит ли платить за него и есть ли там что то необходимое ? насчет модульных сеток о которых вы писали, я покопался в инете, насколько понял на фотошоп можно скачать плагин или что то подобное 0

@halkGreen 1 / 1 / 2 Регистрация: 23.03.2016 Сообщений: 7
	28.03.2016, 18:36	15
	Адаптивный дизайн требует времени для изучения. Сетки пишут на css об этом есть целый курс в академии правда довольно скудный но для самых азов пойдет. Больше ютуба и гугла вам в помощь.когда поймете как работает сетка беритесь за бустрап. 0

@Evgeniy55 108 / 102 / 35 Регистрация: 14.03.2014 Сообщений: 586
	28.03.2016, 19:07 [ТС]	16
	Сообщение от halkGreen Адаптивный дизайн требует времени для изучения. Сетки пишут на css об этом есть целый курс в академии правда довольно скудный но для самых азов пойдет. Больше ютуба и гугла вам в помощь.когда поймете как работает сетка беритесь за бустрап. теперь понял о каких сетках вы говорите, на бутстрапе я как то делал сайт, с применением cols/rows и максимум 12 там наскок помню..... вообщем почитаю как самому создать эту сетку 0