Вставить изображение в div
Можно ли как-то вставить изображение в DIV блок, не вытягивая его и не растягивая. Допустим есть блок 200х150 изображение 300х200. Вставить его в блок, отцентрировав и обрезав всё что не вошло!?
Лучшие ответы ( 1 )
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:
Как поместить изображение в div
Добрый день! Как можно поместить изображение в div, чтобы оно не вылазило за его пределы? Чтобы.
Изображение шире чем div
Здравствуйте, у меня есть блок шириной 1000px в нем есть полоска шириной в 1px и она повторяется с.
Фон изображение для отдельного div
Может кто сталкивался или может помочь Как сделать для каждого div отдельный фон. Имеется.
Не отображается изображение в теге div в IE/Firefox
Доброго времени суток! Есть html-документ со следующим содержимым: <div >
dev — investigator
2151 / 1496 / 651
Регистрация: 16.04.2016
Сообщений: 3,696
Сообщение было отмечено allonemoon как решение
Решение
allonemoon, например =>Песочница
div>img src="https://dummyimage.com/300x200/d9d9d9/000000.png">/div>
1 2 3 4 5 6 7 8 9 10 11 12 13
div{ position:relative; border:1px solid red; width:200px; height:150px; overflow:hidden; } img{ position:absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
Как разместить большую картинку в div блоке?
не могу разобраться с проблемой. Необходимо разместить картинку с большими размерами в div, который по размерам меньше картинки. Но чтобы картинка в блоке отображалась нормально и не обрезалась. Блок div должен быть адаптивным.
.img-wrapper < width: 33.3%; min-height: 80px; text-align: center; >.img < width: 100%; height: 280px; background: url('https://picsum.photos/id/237/400/300') no-repeat center; >.img-button
Отслеживать
задан 10 дек 2019 в 9:39
535 1 1 золотой знак 5 5 серебряных знаков 20 20 бронзовых знаков
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
.img-wrapper < width: 33.3%; min-height: 80px; text-align: center; >.img < max-width: 100%; height: auto; >.img-button
-
Вариант (если обертка картинки с фиксированной высотой):
.img-wrapper < width: 33.3%; min-height: 80px; text-align: center; >.img < width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; >.img-button
Как вписать картинку в div?
А можно как-нибудь вписать image в div фиксированного размера (120×120), чтобы image сжимался, не растягивая див и укладываясь в размер 120×120 (сохраняя пропорции). То есть, если изображение маленькое, 10×20, например, чтобы выглядело как 10×20. Если изображение, 120×180, например, чтобы выглядело как ширинаx120. В общем, если картинка маленькая (меньше 120×120), пусть остается маленькой, как есть. А если большая, пусть пропорционально сжимается, не растягивая родительский div. Но при этом css непосредственно картинке задавать нельзя, только внешним дивам
У меня получилось так, что див растягивается:
.mm <
background-color: blue;
max-width:120px;
max-height:120px;
>
PS: я знаю, что для этой задачи идеально подойдет max-width и max-height для img, но я делаю все на тибко (generalinterface.org), где верстка преобразуется в дивы и css непосредственно для img я задать не могу, только для внешнего дива, отсюда такое странное условие задачи.
Изменено 17 июля 2011 пользователем Kat
Как вставить картинку и текст в блок HTML+CSS
Для примера используем созданную в предыдущих статьях заготовку каркаса с шапкой сайта.
Возьмём html код блока content.
Вставим в блок content два абзаца текста.
< div id color: #008080;">content »
< p >Здравствуйте уважаемые будущие веб-мастера!
Мне 55 лет и я рад приветствовать Вас на своём сайте. Этот сайт
первый, который я разработал самостоятельно, а до этого умел только
входить в интернет.
Почему я решил его сделать? За те 3 месяца, пока разбирался в сайтостроении
и создавал этот ресурс обнаружилось, что авторы руководств по созданию
сайтов считают многие нюансы само собой разумеющимися и не обращают на
них внимание. А мне, учитывая возраст и «опыт», было не просто понять как
раз эти нюансы, они отнимали больше всего времени. И я решил написать свой
материал, так что-бы другим было легче сориентироваться в потоке новой информации.< /p >
< p >Если вам что-то будет непонятно,
спрашивайте, для меня нет «глупых» вопросов.
Читайте и создавайте свой сайт самостоятельно, каким бы ни был Ваш возраст и
стаж работы на компьютере. Уверен, у Вас получится еще лучше и уж точно, в
несколько раз быстрее, чем у меня.И я решил написать свой
материал, так что-бы другим было легче сориентироваться в потоке новой информации.
Здесь «разжеваны» все мелочи сопровождающие создание сайта, мимо которых
обычно проскакивают другие авторы.< /p >
< /div >
Есть два абзаца. Теперь посмотрим, как в блок content вставить изображения.
Во-первых, находим изображения в интернете, и если сайт пока на Вашем компьютере, размещаем их в папке images, директории сайта.
Если сайт на виртуальном хостинге, то изображения нужно загружать на него, в соответствующую папку images.
Размещать будем три картинки. Одну по центру в начале статьи, другую в первом абзаце слева, и третью во втором абзаце справа.
Сначала в html код блока content вставим адреса картинок, и зададим для каждой из них свой class. Делается это для того, чтобы в дальнейшем, через эти классы, применить к изображениям свойства CSS.
< div id color: #008080;">content «>
< img class color: #008080;">center » src color: #008080;»>images/i10.png «>
< p >< img class color: #008080;">left » src color: #008080;»>images/i11.jpg «>Здравствуйте уважаемые будущие веб-мастера!
Мне 55 лет и я рад приветствовать Вас на своём сайте. Этот сайт
первый, который я разработал самостоятельно, а до этого умел только
входить в интернет.
Почему я решил его сделать? За те 3 месяца, пока разбирался в сайтостроении
и создавал этот ресурс обнаружилось, что авторы руководств по созданию
сайтов считают многие нюансы само собой разумеющимися и не обращают на
них внимание. А мне, учитывая возраст и «опыт», было не просто понять как
раз эти нюансы, они отнимали больше всего времени. И я решил написать свой
материал, так что-бы другим было легче сориентироваться в потоке новой информации.
Здесь «разжеваны» все мелочи сопровождающие создание сайта, мимо которых
обычно проскакивают другие авторы.< /p >
< p >< img class color: #008080;">right » src color: #008080;»>images/11.jpg «>Если вам что-то будет непонятно, спрашивайте, для меня нет «глупых» вопросов.
Читайте и создавайте свой сайт самостоятельно, каким бы ни был Ваш возраст и
стаж работы на компьютере. Уверен, у Вас получится еще лучше и уж точно, в
несколько раз быстрее, чем у меня.
И я решил написать свой
материал, так что-бы другим было легче сориентироваться в потоке новой информации.
Здесь «разжеваны» все мелочи сопровождающие создание сайта, мимо которых
обычно проскакивают другие авторы.< /p >
< /div >
Получилось вот так.
Теперь, свойствами CSS, распределим изображения по местам.
.center < /*Звёздочка*/
margin : 0 0 10px 330px ; /*Внешние отступы*/
>
.left < /*Чёртик слева*/
float : left ; /*Обтекание справа*/
margin : 10px 10px 10px 10px ;
>
.right < /*Чёртик справа*/
float : right ; /*Обтекание слева*/
margin : 10px 10px 10px 10px ;
>
Как видите, для изображений находящихся в массе текста, задаётся свойство CSS — float, и оно предписывает тексту обтекать изображение, и обтекать его с заданной стороны. А при помощи свойства margin, задаётся отступ текста от изображения.
Я бы здесь добавил ещё красную строку.
p text-indent : 30px ;
>
На следующей странице мы рассмотрим относительное позиционирование, и будет ещё интереснее. И совсем не сложно.
Неужели не осталось вопросов? Спросить
Перемена
Учитель музыки Сашеньке:
— Предупреждаю, если ты не будешь вести себя как следует, я скажу твоими родителям, что у тебя есть талант.
Запись опубликована в рубрике CSS основы. Добавьте в закладки постоянную ссылку.
30 комментариев на «Как вставить картинку и текст в блок HTML+CSS»
Судя по вопросу, одной подсказкой тут не отделаешься. flexbox — это тема для отдельной полноценной статьи, которую я ещё не написал, так что в Гугл, инфы предостаточно и фишка не сложная, но удобная. Для большого количества изображений — самое то, что надо.
Максим говорит:
Доброго времени суток. А не подскажите как расположить изображения в блоке div с помощью flexbox? Не float.
irmaseo говорит:
Очень полезная статья, спасибо
Ирина говорит:
Ай спасибо! Три дня мучала коды и не понимала, почему картинка не хочет лежать слева от текста. Оказывается, нужно было поставить float!
(не кидайтесь помидорами — делаю с нуля, курю мануалы, про флоат раньше не знала) Дай вам бог здоровьечка!
Добрый день Герман. Так как Вы единственный из 30 человек, ежедневно посещающих эту страницу, и только у вас текcт не хочет ложиться в блок, то вывод очевиден. Я всё же проверил код в редакторе — всё работает так как и показано. Проверьте ещё раз. Скорее всего, где-то пропущена закрывающая кавычка или точка с запятой в конце строки. Я на той неделе два дня искал незакрытый див в Кнопках CSS, и нашёл эту пропущенную угловую скобку только с помощью поиска Notepad. И что ты думаешь — на самом видном месте. «Где были мои глаза!». Вот так бывает.
Герман говорит:
Доброго времени суток! Все делаю и повторяю как вы пишите но вот в элементарном застрял. Пытаюсь сделать текст для блок и вставить его, но он не хочет ложится в сам блок а прописывается в отступы. В чем ошибка? Повторяю все делаю как у вас написано. Даже(когда очередной раз не получилось) тупо скопировал код но текст все равно не встал в блок а разместился в пространстве отступа. Спасибо.
I will never give up help. And what kind of help can you offer?
Smithe207 говорит:
Heya im for the first time here. I discovered this board and I to uncover It truly helpful & it helped me out a whole lot. I hope to supply something back and aid other people such as you helped me.
Мои понятнее для начинающих, потому что писал я этот материал в процессе обучения, как конспект студента, а не тогда когда стал мастером и многие мелочи стали «само собой разумеется». Сейчас наверное так уже не напишу.
Олег говорит:
Cергей, доброго вечера! Спасибо что ответили Глюк в самом нотепаде. Переделал
все в Dreamweaver и все нормально.
Хотел бы добавить, что на самом деле Ваши объяснения намного лучше и понятней в отличии от Попова и других авторов видео курсов которые как бы уже считаются доками в этом деле Спасибо за труды
Здравствуйте Олег. Так как статья написана давно я перепроверил код. Скопировал, вставил в Notepad++ и изменил margin у правого чертика. Картинка подвинулась согласно новым значениям. Перепроверьте ещё раз свой код. Может точки с запятой в конце строки нет или ещё какая-то мелочь?
Олег говорит:
Доброго времени суток Старик! Тут такой вопрос по теме влаживания картинок
Я вставил 5 штук 3 по левой стороне и 2 по правой
Стали четко, но вся фишка в том что левые они свойством margin регулируются во все стороны, а те что справа нет. В чем может быть проблема?
Спасибо Дружище. И тебе всего чего хочется, и побольше и побыстрее.
Спасибо Джек за понимание и советы. Но сознаюсь честно, в последнее время, замечаю за собой уже не желание разжёвывать всё так как в начале. Видимо начал «забуревать». Придётся, видимо, этот момент мне всё таки учесть, и исправить. Ведь дело ещё в том, что я даже не думал в начале, что этот сайт будет кому-то интересен. Просто мне так удобнее осваивать материал, т.е. понять, потом сделать, потом подробно описать всё что сделал, вот тогда всё хорошо усваивается. И больше всего я ждал насмешек и критики в комментах. Ну вот получилось то, что получилось. Сейчас не знаю даже что делать. По идее знаю уже достаточно, чтоб запустить и гнать свой основной ресурс, а этот сайт использовать только как конспект шпаргалку, монетизировать то его практически невозможно. Ведь о каких деньгах можно говорить с конкретными новичками, и всякая реклама им по барабану. Я даже Адсенсе убрал — всё равно по нулям идёт. И бросить сейчас — уже как то не так. Люди то идут, что-то находят, что-то спрашивают, ну как бросишь? Видимо придётся тянуть, и тянуть так же досконально и подробно, как я это делал вначале. Эх если бы не работа, но её тоже не бросишь, там бесценный материал для основного ресурса. Собираю, а вот обрабатывать уже не успеваю. Ну ладно, извини, уже нытьё пошло. Людям и потруднее во сто раз бывает. Короче, по просьбам трудящихся тормоз Блога Старого Перца отменяется. Постараюсь успевать. Ведь мы то уже понимаем, что людская искреняя благодарность, приносит гораздо больше, чем могут принести деньги.
Джек говорит:
УМЕТЬ и ОБЪЯСНИТЬ.
Вот в этом согласен с Владимиром.
Чайник он и в Африке чайник и не суть важен эксклюзив.
Старик прав, как и прав в приводимом аргументе Владимир.
Не все преодолевающие барьер в изучении HTML либо CSS молодого возраста. Есть люди гораздо старшего поколения, к которым себя и отношу.
Отдать предпочтение тому либо другому мнению — затруднительно.
Истина важнее!
Сталкивался с многими сайтами подробной тематики.. вроде как бы и все «разжевано», ан нет.. не все. Здесь простите немного отклонюсь в сторону философии. Многие освоившие HTML, CSS (независимо от возрастной группы) стараясь поделиться своим опытом, никогда не снизходят до уровня абсолютного нуба, пытаясь обьяснить прописные истины. И как говорит опыт, люди прочитав подобное изложение и ничего не поняв — просто напросто уходят. Безусловно наличие интеллекта, будь то новичок или умудренный опытом ветеран имеет существенное значение. Всегда обходил «десятой дорогой» те сайты, где их авторы в изложении материала о веб-строительстве, почти всегда в большинстве случаев, выражались двусмысленно… иди туда, не знаю куда, возьми то не знаю что, и положи это непонятно куда и зачем т.д.
Краткое резюме. Так как делает это Старик, понять проще, яснее. Не хвалю его, совсем нет. Просто.. обычный человек освоивший да мелочей и дающий советы, рекомендации, выражаясь совершенно ясным, понятным языком, явно старался снизойти до уровня понятного, извините повторюсь.. абсолютному новичку. За что ему и спасибо!
Ну а Старику пожелание.. при изложении материала старайтесь до «мельчайших деталей» обьяснить новичку те или иные аспекты возникшего вопроса либо проблемы. Однозначно — это затруднительно, спору нет, зато понимание этого немаловажного аспекта привлечет к вашему ресурсу намного больше благодарных пользователей.
Джек говорит:
Ну Старику подниму настроение! Здравствуй Сергей!
Извини что долго отсутствовал..
Позволь поздравить тебя с наступающим Новым Годом! Хочу пожелать тебе
здоровья, благополучия, счастья, творческих успехов да и всего самого
хорошего! Чтоб блог развивался и побольше, хороших новостей и учеников!
С огромным Уважением Джек
Нет, всё не правильно.
Если для header задан класс, то перед ним ставится точка, но скорее всего он просто блок, тогда ставится #header.
В background-image не нужен весь путь, нужно так:
background-image:URL(images/wolf.png)
Фоновым изображениям? width и height не задаются. Они сразу делаются нужного размера, а если размер картинки меньше блока, то она начинает размножаться по умолчанию, а если больше, то она не отображается.
background-position — верно
background-repeat:no-repeat: — нужно добавить, это запрет размножения.
hummingbird говорит:
Правилен ли код для вставки картинки в шапку? .header <
background: #FFE4C4;
background-image: /www………………/Themes/default/images(wolf.png);
height: 150px;
width: 250px;
background-position:top 0px center; >
Точно. Только насчёт папки atachment, не скажу наверняка (не знаю директорию форума). На блоге картинка для шапки загружается в wp-content — themes — название темы — images.
Затем в стилях прописывается следующее свойство:
background: #f3ffff; /*фон, схожий с фоном картинки*/
background-image: url(images/s3.png); /*картинка в шапке*/
background-repeat:no-repeat; /*запрет размножения*/
background-position:top 0px center; /*размещение, тут можно экспериментировать со значениями, короче двигать туда-сюда*/
Да ещё. Картинка делается сразу нужного размера. Если будет больше, может вообще не появиться в окне.
Джек говорит:
Ладно, к делу.. вот ссылка куда я хочу вставить картинку весом 66 Kb и размером 550 на 300
В этот прямоугольник.
Firebug пустое место не исследовать, как тут быть и составить код? Картинку наверное нужно забросить на сервер в папку Аттачмент?
Подскажи пожалуйста.