Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.50/4: Рейтинг темы: голосов - 4, средняя оценка - 4.50
0 / 0 / 1
Регистрация: 07.06.2018
Сообщений: 13
1

Как сделать так, чтобы картинки на сайте (обложка журнала и скрин youtube) были автоматически на всю ширину экрана и мен

24.06.2018, 05:30. Показов 770. Ответов 3
Метки нет (Все метки)

Как сделать так, чтобы картинки на сайте (обложка журнала и скрин youtube) были автоматически на всю ширину экрана и меняли размер при увеличении-уменьшении окна?

сайт www.moscow.octawa.ru

index.html
Код
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Москвичи на бизнес-тренингах Тони Роббинса</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="header"></div>
<div id="head">
<p><font face="Droit Serif"><em>Знание - половина ума (русская пословица).</em></font></p>
<img src="down arrow.png" width="48" height="48" alt=""/><br>
<img src="Tony-Robbins-Success-magazine 2.jpg" width="" height="" alt=""/><br>
<br>
<p><a href="https://www.youtube.com/channel/UC12htG3aU9E5ABojYxs4DwA?sub_confirmation=1" target="_blank"><img src="обучающие ролики 2.png" width="" height="" alt=""/></a></p><br>
<br>
<img src="like.png" width="48" height="48" alt=""/> <img src="right arrow.png" width="48" height="48" alt=""/>
<font face="Droit Serif"><a href="https://www.youtube.com/channel/UC12htG3aU9E5ABojYxs4DwA?sub_confirmation=1" target="_blank">Посмотреть обучающие ролики Тони Роббинса</a></font><font style="color:#FF0000"><sup>free</sup></font><img src="star 2.png" width="" height="" alt=""/><img src="star 2.png" width="" height="" alt=""/><img src="star 2.png" width="" height="" alt=""/><img src="star 2.png" width="" height="" alt=""/><img src="star 2.png" width="" height="" alt=""/><br>
<hr size="1" width="956" align="left">
<br>
<br>
<br>
<div id="balloon01"><img src="speech balloon description.png" width="266.6" height="200.3" alt=""/><br></div>
<p><font face="Droit Serif"><a href="https://youtu.be/FYHEnOkxKLg" target="_blank">Инна Родина из Москвы: "... моя деятельность связана с работой на крупнейшего в России производителя продуктов питания. Я очень люблю свою работу. И здесь я для того, чтобы совершить новый прорыв в жизни. Более конкретно: мне нужна новая энергия, новые контакты, новые знакомства"</a></font></p>
<hr size="1" width="100%" align="left">
<br>
<br>
<br>
<div id="balloon"><img src="speech balloon with words.png" width="266.6" height="200.3" alt=""/><br></div>
<p><font face="Droit Serif"><a href="https://youtu.be/0qp_uWhPJZk" target="_blank">Ирина Романова из Москвы: "Мне всегда очень нравятся люди, которые <br>окружают меня на семинарах... Все очень дружелюбные, открытые, полезные и <br>приятные люди"</p>
<hr size=1px width=100% align="left">
<br>
<br>
<br>
<div id="balloon"><img src="speech balloon with words.png" width="266.6" height="200.3" alt=""/><br></div>
<p><font face="Droit Serif"><a href="https://youtu.be/ixET1MlvqV0" target="_blank">Надежда Палагина из Москвы: "Я услышала про Тони Роббинсе от практически всех людей, с которыми мне хотелось бы общаться. То есть все мое окружение уже здесь побывало и нашло для себя самые разные открытия: по бизнесу, по здоровью, по развитию отношений, про свое личное призвание... я получила очень многое... нас здесь 8000 человек из 67 стран... все они сюда приехали за энергией, позитивом, открытиями, и каждый из этих людей находит для себя эти открытия. Это совершенно потрясающая энергия!.."</p> 
<hr size=1px width=100% align="left">
<br>
<br>
<br>
<div id="balloon"><img src="speech balloon with words.png" width="266.6" height="200.3" alt=""/><br></div>
<p><font face="Droit Serif"><a href="https://youtu.be/Zx4ukPMGksY" target="_blank">Станислав из Москвы: "...это просто WOW! Это что-то грандиозное! Необычное!.. Это что-то внутри. Что-то меняется. Я заглянул глубже в себя. Увидел какие-то вещи, которые не видел раньше. Те вещи, на которые стоило посмотреть. Это действительно то, что нужно прочувствовать... Это просто драйв! Это очень круто! Хождение по углям... Обязательно стоит приехать, стоит послушать и прочувствовать на себе"</p> 
<hr size=1px width=100% align="left">
<br>
<br>
<br>
<div id="balloon"><img src="speech balloon with words.png" width="266.6" height="200.3" alt=""/><br></div>
<p><font face="Droit Serif"><a href="https://youtu.be/DLf5bz2tc_I" target="_blank">Василина Карпаенок из Москвы: "...вообще нет каких-то преград. Они у нас в голове... все начинается с себя. Чтобы мы как-то дальше могли развиваться и вообще свои цели достигать, то начать надо с себя... Я очень рада каждому дню, потому что сегодня я не ожидала, например, что я услышу столько всего для себя, и для меня это было просто открытие"</p> 
<br>
<br>
<br>
<div id="balloon"><img src="speech balloon with words.png" width="266.6" height="200.3" alt=""/><br></div>
<p><font face="Droit Serif"><a href="https://youtu.be/0z6IA5qeVjU" target="_blank">Артем Блок из Москвы: "Занимаюсь я куплей-продажей недвижимости на рынке Москвы и МО... Сервис был на высочайшем уровне... Первый день семинара был просто потрясающий. Тони на записи хорош. Но когда ты видишь его вживую - это просто бомба... Первый день семинара прошел на таком пиковом состоянии, ... когда 8000 человек в унисон поднимают свою энергетику, этой энергетикой обмениваются... Благодарен новым знакомствам, которые у меня завязались в процессе этих семинаров. Здесь огромное количество практики. И все, кто еще думает, поехать на семинар или не поехать, если мое интервью вам поможет, то я вам говорю однозначно: надо ехать, откладывать все свои дела, может быть, завязывать какие-то дела, просто брать и ехать, потому что ту информацию, ту энергетику, которую вы получите, тот запал, все эти знакомства - они выстрелят у вас в вашей будущей жизни. Вы просто проснетесь после семинара и поймете, что был тот "До" и был тот "После". То есть... мы просто переродимся"</p> 
<hr size=1px width=100% align="left">
<br>
<br>
<br>
<div id="balloon"><img src="speech balloon with words.png" width="266.6" height="200.3" alt=""/><br></div>
<p><font face="Droit Serif"><a href="https://youtu.be/PEqwYgFiet0" target="_blank">Татьяна Попова из Москвы: "Занимаюсь бизнес-авиацией: аренда частных самолетов, также веду свой благотворительный фонд, занимаюсь инвестпроектами, искусством... О Тони узнала от общих знакомых, друзей. На самом деле сложно не узнать. По-моему, весь мир знает, что Тони Роббинс № 1 коуч в мире. И не прийти к нему на тренинг тоже было бы абсурдом... Я уверена и считаю, что чем успешнее человек, тем больше он должен развиваться... У меня очень теплые, душевные остались впечатления... Тони Роббинс, развитие, саморазвитие объединяют людей... Также отдельное спасибо хотелось бы сказать организаторам... И я уверена, ребята, что вы привезете Тони Роббинса в Москву"</p>
<hr size=1px width=100% align="left">
<br>
<br>
<br>
<div id="balloon"><img src="speech balloon with words.png" width="266.6" height="200.3" alt=""/><br></div>
<p><font face="Droit Serif"><a href="https://youtu.be/rEs1TfnPWW8" target="_blank">Оксана из Москвы: "Тони Роббинс - вообще крутой чувак. Мне он очень нравится... Вчера мы ходили по углям... много бегали, прыгали, танцевали, клево... Я сегодня загадала самое заветное желание. И оно сбудется. Это миллион процентов... Приезжайте сюда. И пускай Тони Роббинс приезжает к нам в Россию"</p>
<hr size=1px width=100% align="left">
<br>
<br>
<br>
<div id="balloon"><img src="speech balloon with words.png" width="266.6" height="200.3" alt=""/><br></div>
<p><font face="Droit Serif"><a href="https://youtu.be/YIAxtKZjcko" target="_blank">Марина Михайлова из Москвы: "Вчера был просто потрясающий день: хождение по углям. Сначала было, конечно, страшно, но потом я была поражена насколько это было просто и легко, потому что нас несколько часов вводили в нужное состояние. Это было супер переживание! И теперь после этого ощущение, что я могу все! Всех благодарю, всех приглашаю!"</p>
<hr size=1px width=100% align="left">
<br>
<br>
<br>
<div id="balloon"><img src="speech balloon with words.png" width="266.6" height="200.3" alt=""/><br></div>
<p><font face="Droit Serif"><a href="https://youtu.be/ZW5czvGvP-Q" target="_blank">Елена из Москвы: "Преодоление страха - это то, что привело меня сюда, на Тони Роббинса... Мне стало легче, лучше. Я поняла, какие у меня есть проблемы, которые я буду решать. Я очень рада, что все так случилось. Еще раз спасибо"</p>
<hr size=1px width=100% align="left">
<br>
<br>
<br>
<div id="balloon"><img src="speech balloon with words.png" width="266.6" height="200.3" alt=""/><br></div>
<p><font face="Droit Serif"><a href="https://youtu.be/4OZTCfuxEsk" target="_blank">Ольга из Москвы: "Мы вчера были на семинаре Тони Роббинса, это был первый день, и мы ходили по углям. Это было супер! Это было невероятное зрелище! Невероятные впечатления! И я желаю всем иметь такой опыт"<br>Наталья из Москвы: "Нас долго настраивали, но это того стоило, на самом деле. Я думаю, что этот опыт во многом поможет в нашей дальнейшей жизни"<br>Ольга:"Если вы это сделали, значит вы сделаете многое другое"</p>
<hr size="1" width="956" align="left">
<br>
<br>
<br>
<div id="balloon"><img src="speech balloon with words.png" width="266.6" height="200.3" alt=""/><br></div>
<p><font face="Droit Serif"><a href="https://youtu.be/TRUfcSf-Jio" target="_blank">Юлия из Москвы: "... замечательное мероприятие. Прекрасная собралась тусовка... масса новых контактов, положительных эмоций... вчера мы ходили по углям. Это интересное испытание. Рекомендую всем его пройти. Возможно, что-то для себя тоже поймете"</p>
<hr size="1" width="956" align="left">
<br>
<br>
<br>
<div id="balloon"><img src="speech balloon with words.png" width="266.6" height="200.3" alt=""/><br></div>
<p><font face="Droit Serif"><a href="https://youtu.be/VLs69FGgcAs" target="_blank">Аня из Москвы: "Это было зэ бэст"</p>
<hr size="1" width="956" align="left">
<br>
<br>
<br>
<div id="balloon"><img src="speech balloon with words.png" width="266.6" height="200.3" alt=""/><br></div>
<p><font face="Droit Serif"><a href="https://youtu.be/q1F28BI0F6k" target="_blank">Олег Пронин из Москвы: "Я являюсь руководителем и одним из акционеров девелоперской компании по строительству жилья в Москве... Это был не первый тренинг в моей жизни, но мастерство Энтони Роббинса меня поразило. Те навыки и техники, которые он дает, тот прорыв, который он фактически обеспечивает, то, как он держит аудиторию - просто поразило мое воображение! ... тренировка через ощущения, через эмоции - это самая эффективная тренировка."</p>
<hr size="1" width="956" align="left">
<br>
<br>
<br>
<div id="balloon"><img src="speech balloon with words.png" width="266.6" height="200.3" alt=""/><br></div>
<p><font face="Droit Serif"><a href="https://youtu.be/QJdXFfS8Ar4" target="_blank">Нелли Землянская из Москвы: "Я - основатель проекта English Home... все мои ожидания превзошли настолько! Это было мегакруто. Это реально был прорыв! Однозначно я сейчас буду менять свою жизнь просто кардинально. Я много вещей проработала... Естественно, я теперь собираюсь поехать на свидание с судьбой"</p>
<hr size="1" width="956" align="left">
<br>
<br>
<br>
<div id="balloon"><img src="speech balloon with words.png" width="266.6" height="200.3" alt=""/><br></div>
<p><font face="Droit Serif"><a href="https://youtu.be/fNxjTPlz3yU" target="_blank">Ольга из Москвы: "Супер! Такой волшебный пендель! Столько энергии! Состояние такое, что хочется всех любить, что ты действительно все можешь. Любое дело тебе будет по плечу. Никаких сомнений, никаких страхов! Только успех! Только вперед! И всему say "Yes!"</p>
<hr size="1" width="956" align="left">
<br>
<br>
<br>
<div id="balloon"><img src="speech balloon with words.png" width="266.6" height="200.3" alt=""/><br></div>
<p><font face="Droit Serif"><a href="https://youtu.be/Gktwt5KqMGg" target="_blank">Максим Темченко из Москвы: "Я - бизнес-тренер... Тони достоин того, чтобы называться Номер 1. В этом есть не просто что-то интересное, а что-то действительно крутое, серьезное, качественное, высший уровень мастерства... У меня возникло множество идей, новых решений... много новых решений по поводу внутренних стандартов, по поводу внешних целей, по поводу простройки видения будущего... Я действительно нашел себе качественного учителя... И Тони Роббинс - тот человек, у которого я хочу учиться... очень сильное качество личностной проработки... Нисколько не жалею, что сюда приехал. Наоборот, жалею, что не сделал этого раньше... Эти вещи... однозначно повернут вектор жизни в новую сторону, туда, куда я хочу метить... Спасибо огромное! Всем рекомендую. Это то, что называется musthave сейчас"</p>
<hr size="1" width="956" align="left">
<br>
<br>
<br>
<div id="balloon"><img src="speech balloon with words.png" width="266.6" height="200.3" alt=""/><br></div>
<p><font face="Droit Serif"><a href="https://youtu.be/RDq7_5h8E5M" target="_blank">Сергей из Москвы: "...это чувство, которое я здесь приобрел, сохранится со мной надолго... Методика очень здорово упакована и буквально попадает в мозг. Благодаря эмоциям, которые я испытал, я понял и свои страхи, и что мне не хватает. Я бы это сам отдельно никогда не сделал... Здесь за короткое время понимаешь, кто ты есть, каким ты должен стать и что тебе надо для этого сделать. Я хорошо представил, что я буду делать через годы, я знаю, что сделаю буквально в ближайшие месяцы... Спасибо вам огромное!"</p>
<hr size="1" width="956" align="left">
<br>
<br>
<br>
<div id="balloon"><img src="speech balloon with words.png" width="266.6" height="200.3" alt=""/><br></div>
<p><font face="Droit Serif"><a href="https://youtu.be/Ti6wEYKXi1s" target="_blank">Павел Мельников из Москвы: "... занимаюсь стартапами... сегодня я понял, и это мой основной инсайт, с которым я уезжаю... лучшая версия себя - это состояние, это пиковое состояние, в которое ты себя каждый раз вводишь...  быть лучшей версией себя каждый день "</p>
<hr size="1" width="956" align="left">	
<br>
<br>
<br>
<div id="balloon"><img src="speech balloon with words.png" width="266.6" height="200.3" alt=""/><br></div>
<p><font face="Droit Serif"><a href="https://youtu.be/BEpW1kAVZ_A" target="_blank">Ольга Талышева из Москвы: "... занимаюсь имиджем и тренингами для девушек... два года я откладывала эту поездку, о чем я, конечно, жалею... мы проработали свои убеждения, сломали все старые убеждения, я рыдала... выработали новые привычки, рычаги, которые будут нас, как говорит Тони, не толкать, а притягивать к нашим новым целям, мечтам... знаете, я иду с телефоном и записываю просто идеи, что мне нужно будет реализовать в Москве, как улучшить свои отношения, свое здоровье и что мне нужно предпринять в бизнесе, чтобы вывести его на новый уровень и совершить прорыв в следующей году... много-много людей из разных сфер приезжает, мы обмениваемся контактами, общаемся, завязываются партнерства, какие-то идеи новые и взаимовыгодное сотрудничество"</p>
<hr size="1" width="956" align="left">	
	
	
	
	
	
	
	
	
<br>
<br>
<br>
<div id="balloon"><img src="speech balloon with words.png" width="266.6" height="200.3" alt=""/><br></div>
<p><font face="Droit Serif"><a href="https://youtu.be/hlvxnmYErUg" target="_blank">Руководитель Артем Нестеренко рекомендовал посмотреть фильм Тони Роббинса "Я не твой гуру"</p>
<hr size="1" width="956" align="left">	
	

	
	
	
	
	
	

	
	
	
	
<br>
<br>
<br>
<div id="balloon01"><img src="speech balloon description.png" width="266.6" height="200.3" alt=""/><br></div>
<p><font face="Droit Serif"><strong>Радислав Гандапас (известный бизнес-тренер)</strong>:<a href="https://youtu.be/ElbgcryGeEM" target="_blank">"...появление горизонтов. Ты смотришь и думаешь: А почему в своем соображении я <br>поставил только вот такую планку?"</a></font></p>
<hr size="1" width="956" align="left">
<br>
<br>
<br>
<img src="Tony-Robbins-Success-magazine 2.jpg" width="" height="" alt=""/><br>
<br>
<p><a href="https://www.youtube.com/channel/UC12htG3aU9E5ABojYxs4DwA?sub_confirmation=1" target="_blank"><img src="обучающие ролики 2.png" width="" height="" alt=""/></a></p><br>
<br>
<img src="like.png" width="48" height="48" alt=""/> <img src="right arrow.png" width="48" height="48" alt=""/>
<font face="Droit Serif"><a href="https://www.youtube.com/channel/UC12htG3aU9E5ABojYxs4DwA?sub_confirmation=1" target="_blank">Посмотреть обучающие ролики Тони Роббинса</a></font><font style="color:#FF0000"><sup>free</sup></font><img src="star 2.png" width="" height="" alt=""/><img src="star 2.png" width="" height="" alt=""/><img src="star 2.png" width="" height="" alt=""/><img src="star 2.png" width="" height="" alt=""/><img src="star 2.png" width="" height="" alt=""/><br>
<br>
<br>
<br>
-------------------------------------------------------------------------------------<br>
Фото: https://flic.kr/p/BfjgDK (CC0 1.0)<br>
Фото: https://www.success.com/file/29571<br>
Star, pointer: icon made by Freepik from www.flaticon.com<br>
Airplane <a rel=”nofollow” href="https://www.freepik.com/free-photos-vectors/banner">Banner vector created by Brgfx - Freepik.com</a><br>
Down, right arrows: icon made by smashicons from www.flaticon.com<br>
Speech bubble: icon made by Iconnice from www.flaticon.com<br>
Like: icon made by Wissawa Khamsriwath from www.flaticon.com<br>
</div>
</body>
</html>


style.css
Код
@charset "utf-8";
/* CSS Document */
#header { position:absolute; top:0px; left:0px; min-width:700px;
    max-width:1920px; 
    width:100%;
    height:400px;
    background-image:url(/23134482489_54113a039e_o.jpg);
    background-repeat:repeat; 
    background-size: 50%; }
#head{
  margin-top: 410px;
}
#balloon01{margin-bottom: -10px;
}
0

Помощь в написании контрольных, курсовых и дипломных работ здесь.

Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
24.06.2018, 05:30
Ответы с готовыми решениями:

Как сделать так, чтобы каждый элемент ListBoxItem был растянут на всю ширину ListBox
Я бы хотел сделать так, чтобы каждый элемент ListBoxItem был растянут на всю ширину ListBox. Справа...

Как сделать так, чтобы в menu были видны картинки слева?
Как сделать так, чтобы в menu были видны картинки слева?

Как сделать так, чтобы данные в прорамму с экрана забивались автоматически?
Друзья! Вопрос сложный, конечно. Я даже не знаю, с чего начать. (Может, даже не тот раздел) Прошу...

Как разместить картинки в две строки на всю ширину экрана
Всем привет! Помогите с форматированием. Как разместить изображения в section#cuisines в два ряда...

3
275 / 269 / 106
Регистрация: 12.01.2016
Сообщений: 1,579
24.06.2018, 09:31 2
codor, Красивая у Вас верстка конечно.
Ну смотрите, Вы используете такие стили
CSS
1
2
3
4
5
6
7
#header { position:absolute; top:0px; left:0px; min-width:700px;
    max-width:1920px; 
    width:100%;
    height:400px;
    background-image:url(/23134482489_54113a039e_o.jpg);
    background-repeat:repeat; 
    background-size: 50%; }
У Вас есть строка width:100%;
Вы зачем то ее применили, зачем то ее написали, наверное с мыслью что бы ширина была 100%, правильно?
Значит если это свойство работает на блок, то должно работать и на изображение, верно?
Четкие у Вас стили в теге img: (width, height), думаю браузер поймет, что это стили и применит их
CSS
1
<img src="speech balloon with words.png" width="266.6" height="200.3" alt=""/>

Не по теме:


И не надо говорить что Вы новичок и все такое, это азы верстки.

0
0 / 0 / 0
Регистрация: 30.06.2018
Сообщений: 4
01.07.2018, 18:52 3
Предлагаю Вам создать фрейм с ссылкой на HTML файл с изображением. В самом HTML файле для изображения нужно вписать следующее:
HTML5
1
<img src="NAME.jpg" alt="NAME" width="100%" height="100%">
А вот необходимое содержимое файла с фреймом:
HTML5
1
<iframe src="IMG.html" scrolling="no" width="100%" height="100%"></iframe>
0
1014 / 671 / 290
Регистрация: 04.04.2013
Сообщений: 2,686
01.07.2018, 19:11 4
Certatium, iframe в 2018 году, вы серьезно?
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
01.07.2018, 19:11

Как сделать так, чтобы на одном и том же сайте у разных аккаунтов были разные ip?
Снова я, прошу извинить, ибо я не знала куда свой вопрос впихнуть, cо своими вопросами. Как сделать...

Как сделать так, чтобы мобильное приложение автоматически подстраивалось под размер экрана?
В Android Studio мы же под определенную диагональ создаём приложение (один эмулятор).. Как при...

Как сделать так, чтобы на одной строке были 2 div, один был с левой стороны экрана, второй с правой?
Мне нужно, чтобы заголовок окна был прикреплён к левой части экрана, кнопка к правой. При...

Как сделать блок на всю ширину экрана
&lt;div тут в стилях фиксированная ширина&gt; &lt;div&gt;&lt;/div&gt; &lt;div&gt;100% по ширине браузера&lt;/div&gt;...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
4
Ответ Создать тему
Опции темы

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