Search the Community
Showing results for tags 'img'.
-
Не могу расположить второй ряд картинок все div идут в одну строчку. Пробовал и команду clear (both, left) всем блокам прописан float:left.(Всё в конце кода). Заранее спасибо за помощь.На всякий случай прикреплю ещё картинки. index.html style.css
-
Здравствуйте! Есть небольшая проблема: имеется блок, в который вставляем строчные гиперссылки с изображениями внутри. Обнаружил, что в данном блоке появляется странный отступ снизу (зеленного цвета), от которого я не могу избавиться. Так как я новичок, то прошу помощи. Визуально проблему можно посмотреть здесь: https://jsfiddle.net. Проблема плевая, но я застрял . Заранее благодарю!
-
Такая конструкция работает нормально <img src="/img/logo.png" alt="Logo" /> Перестает работать внутри контейнера <a>. И локально и на хостинге, картинка не отображается <a href="/index.html> <img src="/img/logo.png" alt="Logo" /> </a>
-
Помогите пожалуйста, мне надо, чтобы текст отображался внизу картинки БЕЗ ОТСТУПОВ, сразу после картинки.
-
<!DOCTYPE html> <html lang = "eng"> <head> <meta charset = "utf-8"> <link rel = "stylesheet" href = "css/mains.css"/> <title>Шапка</title> </head> <body> <header> <div class = "container"> </div> </header> <section> <div class = "container"> </div> </section> <section> <div class = "container"> </div> </section> <section> <div class = "container"> </div> </section> <footer> <div class = "container"> </div> </footer> </body> </html> css.... (Файл называется mains.css и находится по пути css/mains.css) header { background-image: url(../img/first-bg.jpg): no-repeat center top / cover; height: 8 px; width: 811 px; }
-
Доброго времени суток, прошу помощи в решении задачи. Пример (как должно быть): На данном рисунке: Есть общий контейнер (зеленый прямоугольник), чьи размеры (и ширина и высота) заданы фиксированно (но эти величины заранее не известны + при изменении размеров окна браузера могут меняться) Внутри общего контейнера лежит контейнер изображения (красный прямоугольник). Ну и есть само изображение, о котором не известно вообще ничего. Суть задачи: изображение должно масштабироваться сохраняя свои пропорции так, чтобы занимать всю высоту или ширину зеленого контейнера (быть вписанным в зеленый контейнер), при этом красный контейнер должен иметь размеры в точности такие как само изображение (облегать его). Задача должна быть решена на чистом CSS + HTML. Доп информация: Эта информация имеет косвенное отношение к задаче, и я ее тут предоставил просто чтобы дать больше информации о контексте применения решения если оно найдется. Многое из того что тут описано я не включал в пример задачи чтобы не усложнять ее. Мои наработки: Пока что наиболее близкого поведения я смог добиться только таким способом: https://codepen.io/ows_nightwolf/pen/yxoYBa Но тут изображение не может вырасти больше своего реального размера, и красный контейнер не повторяет размеров изображения
- 7 replies
-
- fit container
- img
-
(and 2 more)
Tagged with:
-
.border { border: 3px dashed orange; } <a href = "images/eye.jpg" class = "border"> <img src = "images/eye.jpg" width = "200" /> </a> а если убрать из ссылки, то норм.
-
Друзья, возникла задача построения ряда блоков. Блоки располагаются один под другим. В каждом есть изображение, которое должно обрезаться снизу. Однако сам div нестандартный. Смотрим картинку Какие у меня были варианты решения: Использовать overflow: hidden; Но идея потерпела крах, потому что он обрезает не по линии, а по горизонтали. Использовать clip; Тоже крах, потому что теряется адаптивность и каждый раз рассчитывать clip даже с помощью js тяжело Разные варианты совмещения. Например, взять из макета дугу и картинку, сохранить как PNG и установить в основном слое как background-position: bottom; Пока это самая лучшая идея, но она не универсальна. Необходимо сделать так, чтобы работало с любой картинкой, не только с выбранной из макета. То есть было бы странно сначала закидывать любую картинку в макет, там вырезать ее вместе с дугой и вставлять как background Как строить такие блоки с обрезкой картинок на нижней границе?
-
Изображение, путь к которому указан неверно, показывается на странице в виде небольшой пиктограммы. Как браузер определяет размеры такого изображения? И можно ли с этим побороться? http://tezhe.ru/img.html На этом примере как-бы картинка справа вытянулась во всю высоту экрана. Хотелось бы, чтобы она имела минимальную высоту. Скажем, в 50px.
-
Здравствуйте дорогие форумчане. Честно говоря сложно описать мою идею по реализации, но я надеюсь я смогу разрешить эту проблемы картинками Прошу помочь мне создать блок в котором бы картинки были наклонены. Идея такова, есть блок на сайте в котором я бы хотел реализовать такое: Всего нужно, чтобы в блоке было 4 такие картинки(короче как на картинке, только на всю ширину блока), нужно их реализовать на всю ширину блока. В каждом из этих четырех будет кнопка и текст сверху. Сам блок который называется "Каталог // наши товары" связан с бутстрапом. Ну а теперь в чем заключается моя проблема. Я не знаю как сделать такие наклонные блоки с изображением внутри. Ссылка на сайт
-
Мне нужна помощь, как создать иерархуию изображений, чтобы одно накладывалось на другое ( у меня получается обычно наоборот, так же в коде я менял позиции ). Так же еще один вопорос, как на это изображение налепить текст, который был бы кликабелен?
- 3 replies
-
- css
- изображение
-
(and 3 more)
Tagged with:
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="style.css"> <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,700|Raleway:200" rel="stylesheet"> <title>Content</title> </head> <body> <div id="all"> <div id="up"> <p>Компания «Турбомикрон» всегда совершенствует свой сервис по работе и обслуживанию своих новых так и постоянный клиентов. Мы налаживание связи со всеми товаро-транспортными компаниями, для того чтобы наша работа с клиентами была максимально продуктивна.Поэтому наши турбины мы можем отправлять по всей территории Украины, а также в ближайшие страны СНГ.</p> <img src="jpg/up.jpg" alt="Турбомикрон"> </div> </div> </body> </html> body { background: #eee; } #all { margin: 100px 20% 0 ; } #up { border: 1px solid #d1ea9b; background-color: #fff; text-align: center; padding: 10px; min-height: 100%; } #up>img { width: 40%; float: right; } #up>p { width: 58%; float: left; font-family: 'Open Sans', sans-serif; font-size: 1.25vw; overflow: hidden; } нужно, чтобы блок подстраивал высоту под содержимое. пробовал добавить пустой див со свойством "clear: both". результата не дало
-
Всем привет. Я только недавно начал верстать. Сейчас пытаюсь сделать e-mail рассылку. У меня такой вопрос: зачем оборачивать img в div если и без div работает ? Пример : <td width="138" valign="top" style="margin: 0; padding: 0; padding-top: 14px; padding-left: 30px;"> <a href="#" target="_blank" border="0" style=" margin: 0; padding: 0; outline: none; border: none; text-decoration: none;"> <div style="font-size:1px;line-height:1px;"> <img width="138" height="84" src="images/logo.png" alt="БонПари" style=" border: 0; margin: 0;padding: 0; display: block; font-size: 1px; line-height: 1px; font-family: Verdana, Tahoma, Geneva, sans-serif;"> </div> </a> </td> Зачем див? Если и так все работает - <td width="138" valign="top" style="margin: 0; padding: 0; padding-top: 14px; padding-left: 30px;"> <a href="#" target="_blank" border="0" style=" margin: 0; padding: 0; outline: none; border: none; text-decoration: none;"> <img width="138" height="84" src="images/logo.png" alt="БонПари" style=" border: 0; margin: 0;padding: 0; display: block; font-size: 1px; line-height: 1px; font-family: Verdana, Tahoma, Geneva, sans-serif;"> </a> </td>
-
Ребята, привет. Кого не обременит. Скажите. почему нет реакции на margin у элементов img?Полоса не впритык с меню и лого. есть расстояние. Это мой третий макет, другие забросил. Макет бесплатный, скачал с группы вк. Верстаю для себя, учусь вот уже второй год. Было прочтен сайт htmlbook, порешал задачки на htmlacademy. Оказалось фронт-энд не такой уж простой как кажется. Что скажете по коду ? http://codepen.io/Gettoheaven/pen/gMYKaP Исходник в img
-
В последнее время появилось много инструментов по работе с изображениями, и мне бы хотелось понять, когда я должен инлайнить изображения из CSS при помощи base64, а когда просто положить их в спрайт. Заранее спасибо.
-
Здравствуйте, граждане! В html5 я столкнулся со следующей проблемой. Оборачивая <img /> в теги <a></a>, у меня под картинкой появляется щель шириной ~3,5px. Кто-то с этим сталкивался? Код следующий: <!DOCTYPE html> <html lang="ru"> <head> <title></title> </head> <body> <div style="border: 1px solid black;"> <a href="#"> <img src="img1.jpg" /> </a> </div> </body> </html> Скриншот результата: https://yadi.sk/i/EWNxjZQ4qhtAp Кроме того, результат одинаков как для браузера Opera, так и для ЯндексБраузера.
-
Вопрос не сильно касается тематики форума, но не знаю куда еще с ним обратиться. Вопрос очень глупый и ламерский. В доте в описании вещей работают html тэги, и раньше я с успехом пихал туда разного вида картинки, вчера пришел к тому, что <img src=> заменяется на _img src=>, можно ли с этим как-то бороться? Заранее спасибо за потраченное в пустую(на меня) время.
-
Здравствуйте. Упрощённый вариант слайд-шоу: http://codepen.io/Kristinita/pen/dMygQj . Хочу сделать так, чтобы изображения показывались на различных экранах только полностью, а не обрезками, как на скрине ниже . Т. е. если картинка не достигнет на экране определённой высоты, то пусть отображается только при вертикальном скроллинге. Эксперименты с min-height ни к чему не привели. Не могли бы подсказать, что не так? Спасибо.
-
Столкнулся с довольно простой задачей. Есть картинка с планом здания, там есть комнаты, они не все квадратные, некоторые неправильной формы. Соответственно нужно при наведение на некоторую комнату затенить область. На выбор были Canvas, SVG и Map, я решил использовать SVG. Все оказалось весьма просто, нарисовать через path комнаты, добавить на :hover затенение и отлично, однако возникла проблема. Стало необходимо ресайзить SVG не только с нарисованными областями, но и с картинкой на background. Вот пример http://codepen.io/anon/pen/WvXqOd
-
Добрый день. Подскажите пожалуйста. Есть ряд картинок из которых надо сделать галерею, при наведении на каждую из которых появляется голубой фон и две кнопки. Это понятно, делается с помощью css с использованием псевдоссылки a:hover. Вопрос в том, как сделать чтобы при нажатии на эти кнопки происходили дальнейшие действие. Одна из кнопок связана с увеличением масштаба картинки. Возможно ли добавить этой новой кнопке ссылку на открытие увеличенной картинки в новом мини-окошке только с помощью css, или здесь необходимо использовать что-то другое?
-
Имеется конструкция типа: <p><img src="image.jpg"></p>Как можно с помощью CSS, указать выравнивание по середине?
-
Помогите есть канвас нужно в него вставить input.button или img, вставлял картинку через new Image все отрисовывает но такая картинка не воспринимает onclick, или есть способы добиться этого?
-
Доброе время суток нужна помощь с масштабированием кнопки (пожалуйста [а то я уже запарился читать и нехрина не доганять]) подробности здесь - https://onedrive.live.com/redir?resid=52ADAD5F450670A4!382&authkey=!AAM1xQaBQ4zzhEs&ithint=file%2cmht за ранее спасибо с уважением Д.Владимир