Нубский вопрос про верстку

А в чем заключается вопрос?))
--- Добавлено ---

--- Добавлено ---
По требованиям нельзя использовать bootstrap?
--- Добавлено ---
Присмотрись к css grid and flex

 

Это Вы зря. Верстка- очень занимательное занятие. Просто, видимо, не умеете ее "готовить"
Овладейте фреймворком bootstrap, там все придумано за Вас + получите современную верстку с адаптивностью под мобильные девайсы, что на данный момент актуально по умолчанию

 

Тут навено надо исходить от ширины или высоты родительского блока, и задать для изображения высоту или ширину 100%. Сложно дать совет, бывает разные случаи, с версткой надо долго играться пока не заработает как надо).

 

попробуй прямо в инструментах разработчика задать высоту для изобржаения телеги 100%
а для родителя явно задай высоту нужную.
--- Добавлено ---
Ширину задай максимально возможную, чтобы больше нужной ширины не было.
--- Добавлено ---
Или убери вообще.

 

https://jsfiddle.net/

 

Сейчас увидел стили твои. Задай для изображения высоту 100% не должен выходиь за пределы.
--- Добавлено ---
И да, подними все в песочнице) помогут быстрее).

 

@Taktreba, т.е. не заполняется? Ну так и должно быть. Или по высоте надо исходить или по ширине, или под эти блоки заранее готовить картинки с нужными размерами.

 

В первую очередь ошибка любого новичка в том, что он "упирается" в частности и не видит всю картину целиком, так не научиться. Выдергивание отдельных блоков и стилей приведет только к "костылям"
Верстка лендинга, практически любого занимает час - два при умелом подходе. И это самое простое. Что же будет когда появятся сложные проекты...

 

Тебе написали: перенеси в fiddle весь код страницы и связанные файлы чтобы она выглядела как на скриншоте, а не огрызки. С этого начнется решение твоей проблемы.

 

Я понял, что тебе надо все делать с нуля и без сторонних библиотек, но может пригодится
https://www.w3schools.com/Bootstrap/trybs_theme_company_full.htm#about
И исходный код
https://www.w3schools.com/Bootstrap/tryit.asp?filename=trybs_theme_company_complete_animation

 

Так, попробую побыстрому и с начала...
Итак... сначала формируешь сам блок страницы (обертку всего кода лендинга)
к примеру

Код (Text):

1. <div class="container"> ... </div>

и пропишем ему класс (пока сделаем фиксированную верстку)

Код (Text):

1. container {
2.     padding-right: 15px;
3.     padding-left: 15px;
4.     margin-right: auto;
5.     margin-left: auto;
6.     width: 1240px;
7. }

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

Код (Text):

1. <div id="content">... </div>

и стили для него

Код (Text):

1. #content {
2.     min-height: 600px;
3.     width: 100%;
4. }

Ну вот... главное (каркас страницы) у нас готово... теперь мы можем заняться контентом
пишем там и заголовки, ссылки и текст и еще всяку лабуду... при этом заблоговременно прописав заголовкам свои стили (учитывая что H1 и H2, должны быть в единственном экземпляре!!! (иначе SEOшники Вас вздернут, как предателя продвижения)

Код (Text):

1. h1, h2, h3, h4, h5, h6 {
2.     color: #444;
3. }
4.  
5. h1 {
6.     font-size: 33px;
7. }
8. h2 {
9.     font-size: 27px;
10. }
11. h3 {
12.     font-size: 21px;
13. }
14. h4 {
15.     font-size: 15px;
16. }
17. h5 {
18.     font-size: 12px;
19. }
20. h6 {
21.     font-size: 10.2px;
22. }
23. a {
24.     color: #23a1d1;
25. }
26. a:hover {
27.     text-decoration: none;
28. }

Вы, конечно скажете.... ты все не о том, а где же картинки? я же спрашивал не о том... а вот и про них)))
итак... код картинок на сайте выглядит примерно вот так

Код (Text):

1. <div class="image"><img src="картинка.jpg" alt="" title="" class=""></div>

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

Код (Text):

1. .image {
2.     text-align: center;
3. }
4. .image img {
5.     margin-left: auto;
6.     margin-right: auto;
7.     vertical-align: middle;
8.     border: 0;
9. }

блииииин.... ну ты же не о том!!! ах ха... именно о том... потому что мы прописали общие псевдоклассы для всего сайта дабы не ломать башку и писать код для каждого блока... и вот... мы добрались до картинок... как же прописать им общие стили...дабы не кривились?
а вот так

Код (Text):

1. .img-responsive {
2.     display: block;
3.     max-width: 100%;
4.     height: auto;
5. }

хм... Паша, да ты гонишь... в коде нет класса img-responsive... )))
и правда не было бы...если бы не пять хитрых строчек кода в подвале сайта

Код (Text):

1. <script>
2. $('img').each(function() {
3.    $(this).addClass('img-responsive');
4. });
5. </script>

которые присвоют любой картинке этот класс или добавит, если у картинки есть еще какой то свой уникальный (для вывертов и выкрутасов с определенной картинкой... ну например помещенную в карусель)

а теперь просто попробуй))) я думаю поняв принцип рассмотрения проекта в целом от большего к меньшему, ты поймешь насколько все просто при кажущейся сложности.

з.ы. используя bootstrap , конечно все в разы еще проще... но пока просто показал как работать "топором"

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

 

@paschaopencart, Паша, мне кажется, это не то что ему нужно)). Он задаст обратно для родителя Img фиксированную высоту и все пропало, шеф!
--- Добавлено ---
А в подвале это выглядит как костыль) можно сразу этот класс прописывать для img).

 

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

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

p.s. Можно, конечно выдать готовый код/решение... но понимание придет только когда каждый знак в коде прописать самостоятельно... копипаст не всегда панацея...

 

А что помешает то, взял да и прописал).

Как нафига? Ну я хочу чтобы в определенном контейнере, картинки не были выше 300px). Не суть в процентах или указывать или в пикселях
Есть блок main
его дочерные блоки images
и в этих боках по картинке img
Задал для главного блока height: 300px;
дочерные наследуют
И картинки тоже).
Тут да, картинка не вылезет никуда).
Но он хочет чтобы и не вылезала и чтобы заполняла. Тут уже наверно готовить картинки надо

В твоем случае будет совсем не то.

Не вижу чтобы у тебя где то с тилях прописан overflow: hidden; )

Ну я ж о том, что можно просто взять и прописать нужный класс к элементу. Одно дело. если его нужно менять, в этом случае можно прибегать к js)

 

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

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

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

Код (Text):

1. <div class="image"><img src="картинка.jpg" alt="" title="" class="unicum"></div>

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

Код (Text):

1. <div class="image"><img src="картинка.jpg" alt="" title="" class="unicum img-responsive"></div>

Код (Text):

1. .unicum {
2. max-height: 300px
3. }

 

Да, понимаю, просто это все его больше мне кажется запутало)).

Я про этот конкретный случай) тут не нужно городить js чтобы добавить стили).

Да, наверно все так. Но главное не выходить за рамки конкретной задачи, а то можно погрязнуть в новых и новых деталях, которые придется предусматривать ))

Вообще я бы на месте @Taktreba просто взял какой-нибудь лендинг и переделал под себя.
Учиться делать без сторонних библиотек конечно надо, и нужно, но когда ты выполняешь заказ и сроки сжатые нужно взять готовое и быстро выполнить поставленную задачу. А потом уже продолжать делать без этих фреймворков ту же задачу, в целях обучения.
--- Добавлено ---
Одно дело если заказчик хочет без библиотек, тут уже ясно что и как.

 

согласен.
но при таких знаниях на данный момент я не думаю что он делает именно заказ. А для обучения мы общими усилиями накидали ему материала для изучения

 

https://htmlforum.io/topic/30482-img-выезжает-из-div/