Автор Тема: Responsive background image  (Прочетена 1661 пъти)

0 Потребители и 1 Гост преглежда(т) тази тема.

georgirgeorgiev

  • Full Member
  • ***
  • Благодарности
  • -Казани: 77
  • -Получени: 13
  • Публикации: 164
Responsive background image
« -: 11 Февруари 2016, 18:04:18 »
Здравейте на всички!
Ситуацията е следната:

- имам един елемент в който няма нищо, тост неговата височина е нула (0px)
<header></header>

- целта ми е да сложа една картинка за фон на този <header> елемент, която картинка да се оразмерява автоматично при разширяване и свиване на прозореца в браузъра
header {
   background-image: url(img.jpg);
   background-repeat: no-repeat;
}


Проблемът:
Тъй, като <header> елементът е празен и не му е зададена никаква височина (height), картинката, която се опитвам да сложа посредством CSS (background-image), няма да бъде сложена и изобразена като фон на този елемент. Ако му сложа някаква височина на <header>-а, тогава картинката ще се изобрази, но пък проблемът ще е, че ще има фиксирана височина и ще се оразмерява само по дължина, а височината ще си остава една и съща.

Въпрос:
Има ли начин, хем да сложа картинката за фон на <header> елемента и в същото време при разширяване и свиване на прозореца на браузъра, картинката да се оразмерява автоматично и по двете - и по дължина и по ширина?

canon4o

  • Sr. Member
  • ****
  • Благодарности
  • -Казани: 18
  • -Получени: 33
  • Публикации: 324
Re: Responsive background image
« Отговор #1 -: 11 Февруари 2016, 21:21:36 »
Пробвай с проценти. Примерно height: 20%;

Avalanche

  • Administrator
  • Hero Member
  • *****
  • Благодарности
  • -Казани: 65
  • -Получени: 275
  • Публикации: 2602
  • meow
Re: Responsive background image
« Отговор #2 -: 11 Февруари 2016, 21:52:49 »
Без никаква височина няма как да стане, освен ако не вкараш снимката в самия header, ама тогава няма е за фон. Ето една идея от мене с min-height и background-size (зависи и от размерите на снимката) https://jsfiddle.net/t0yc6wcj/1/
"Компютрите не правят каквото искаме, а каквото им кажем." Ако разбереш какво значи това няма да имаш големи проблеми, нито с никоя ОС, нито език, или софтуер.
Аз не съм програмист между другото!

georgirgeorgiev

  • Full Member
  • ***
  • Благодарности
  • -Казани: 77
  • -Получени: 13
  • Публикации: 164
Re: Responsive background image
« Отговор #3 -: 12 Февруари 2016, 00:49:46 »
canon4o, не действат процентите за височина, предполагам понеже родителският елемент на елемента на който се опитвам да сложа фонова картинка, няма фиксирана дължина, а този родителски елемент всъщност се явява <body>.

Avalanche, благодаря ти за примера. Значи изглежда няма как да направя това, което се опитвам.
Това, което се различава от това, което искам да постигна и твоя пример, е че целта ми е цялата картинка да е видима през цялото време, във всички резолюции на браузъра, без да се скрива никоя част от нея - единствено да се смаляват размерите на картинката при намаляване на дължината на прозореца в браузъра.

Avalanche

  • Administrator
  • Hero Member
  • *****
  • Благодарности
  • -Казани: 65
  • -Получени: 275
  • Публикации: 2602
  • meow
Re: Responsive background image
« Отговор #4 -: 12 Февруари 2016, 09:07:40 »
Другия вариант е да си играеш с JavaScript https://jsfiddle.net/hxz04y29/ Но това е бая пипкаво и лично аз не съм му голям фен
"Компютрите не правят каквото искаме, а каквото им кажем." Ако разбереш какво значи това няма да имаш големи проблеми, нито с никоя ОС, нито език, или софтуер.
Аз не съм програмист между другото!

georgirgeorgiev

  • Full Member
  • ***
  • Благодарности
  • -Казани: 77
  • -Получени: 13
  • Публикации: 164
Re: Responsive background image
« Отговор #5 -: 13 Февруари 2016, 15:10:31 »
Благодаря, Avalanche.
Ще видя какво ще правя. Май няма да стигна до там, че да използвам JavaScript затова ами вместо това ще използвам <img> за фон.
Главното, което не ми харесва при слагане на картинка чрез <img> вместо чрез CSS (background-image свойството) е че когат се цъкне с дясното копче на мишката върху картинката излизат опции различни от опциите, които излизат, когато се цъкне върху картинка сложена чрез CSS (background-image свойството). Опции от сорта на "Save as ..." и т.н. Дали има някакъв начин да направя картинката сложена чрез <img> елемента, да се държи, като че все едно е сложена чрез background-image, имам предвид, като се цъкне дясното копче на мишката да излиза например "Reload" за презареждане на страницата.

Avalanche

  • Administrator
  • Hero Member
  • *****
  • Благодарности
  • -Казани: 65
  • -Получени: 275
  • Публикации: 2602
  • meow
Re: Responsive background image
« Отговор #6 -: 13 Февруари 2016, 16:16:53 »
Е от какво те притеснява това? Аз ако искам да взема снимката - ще намеря начин да я взема :)
"Компютрите не правят каквото искаме, а каквото им кажем." Ако разбереш какво значи това няма да имаш големи проблеми, нито с никоя ОС, нито език, или софтуер.
Аз не съм програмист между другото!

georgirgeorgiev

  • Full Member
  • ***
  • Благодарности
  • -Казани: 77
  • -Получени: 13
  • Публикации: 164
Re: Responsive background image
« Отговор #7 -: 13 Февруари 2016, 16:30:28 »
Не е взимането на снимката това, което ме притеснява.
Ами например някой потребител може да поиска да презареди страницата чрез "Reload" опцията, но когато цъкне с дясното копче на мишката върху снимката няма да има тази опция, понеже е <img> елемент и ще му изкара различни опции.

А и отделно не знам дали е правилно да се слага снимакта посредством <img> елемент, а не посредством background-image, понеже това в моята ситуация майче си се води фонова снимка и то по-точно това е голямата фонова снимка най-горе в страницата в <header> елемента , каквото имат много сайтове.
« Последна редакция: 13 Февруари 2016, 16:33:10 от georgirgeorgiev »

Avalanche

  • Administrator
  • Hero Member
  • *****
  • Благодарности
  • -Казани: 65
  • -Получени: 275
  • Публикации: 2602
  • meow
Re: Responsive background image
« Отговор #8 -: 13 Февруари 2016, 17:54:40 »
Колко е правилно - не знам, не съм виждал такива правила. А за "Refresh" бутона, аз лично не го ползвам, не мисля че е голяма работа. За да го направиш като хората ще ти трябват media queries.
"Компютрите не правят каквото искаме, а каквото им кажем." Ако разбереш какво значи това няма да имаш големи проблеми, нито с никоя ОС, нито език, или софтуер.
Аз не съм програмист между другото!

georgirgeorgiev

  • Full Member
  • ***
  • Благодарности
  • -Казани: 77
  • -Получени: 13
  • Публикации: 164
Re: Responsive background image
« Отговор #9 -: 13 Февруари 2016, 18:13:51 »
Благодаря ти за линка!
Не знам дали го пише в спецификацията, но някъде мисля че бях чел някой да пише, че обикновено когато има някаква картинка, която не е част от съдържанието, а се използва само за стилизиране/оформление можем да я слагаме като фон, а когато е част от съдържанието трябва да я слагаме директно в HTML-а посредством <img> тага, за да хората с увреждания, които използват screen readers, да могат да знаят, че тя е там и да прочетата alt атрибута на снимката. Или пък когато картинките поради някаква причина не зареждат в сайта (да речем слаба интернет връзка) да може да се види alt атрибута за да се разбере каква картинка е имало на дадено място.

Не знам дали това, което съм прочел е 100% вярно и дали го има в някоя спецификация. Изглежда ми логично.
« Последна редакция: 13 Февруари 2016, 18:16:18 от georgirgeorgiev »