Как зафиксировать картинку в html
Перейти к содержимому

Как зафиксировать картинку в html

  • автор:

Курсы javascript

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

23.02.2013, 16:39

Регистрация: 11.09.2010

Сообщений: 8,804

 html < height: 600px; >img  

23.02.2013, 16:45

без статуса

Регистрация: 25.05.2012

Сообщений: 8,219

   

23.02.2013, 16:53

Регистрация: 23.01.2013

Сообщений: 53

эм. я, походу, неправильно объяснил) мне нужно, чтобы изображение оставалось на определенном месте на странице и чтобы при прокрутке вниз оно оставалось наверху. как обычная вставка изображения только чтобы ложилось поверх всего и не зависело от других объектов, как с fixed, только без перемещения при прокрутке.

Как зафиксировать блок с картинкой?

Author24 — интернет-сервис помощи студентам

То есть прижать к верху посредством fixed. При этом высота блока динамическая, за счет уменьшения высоты картинки во время сужения экрана.

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

Зафиксировать (совместить) слои с фоновой картинкой
Добрый день. Возникла проблема с совмещением кучи мелких слоёв и фоновой картинки. Вот пример.

Как зафиксировать блок?
У меня есть блок с верху(картинка 1) Но когда браузер сворачуешь в маленькое окошко то получается.

Как зафиксировать блок на сайте?
При изменении размеров окна браузера блок #servises съезжает влево, что полностью ломает картину.

Как расположить блок с картинкой?
У меня есть большая картинка. Я хочу сделать её фоном. И именно через блок-div (не body). Картинка.

Эксперт HTML/CSS

2253 / 1639 / 644
Регистрация: 07.08.2016
Сообщений: 3,944
Установить блоку position:fixed; top:0; ?
Регистрация: 18.01.2016
Сообщений: 195
AlexZaw,

ЦитатаСообщение от AlexZaw Посмотреть сообщение

Установить блоку position:fixed; top:0;

Сам верхний блок зафиксируется. Но нижний блок с контентом, уйдет под него.
Для этого обычно верхнему блоку дают высотку или нижнему блоку отступ. Но это не подходит в ситуации где высота верхнего блока динамичная.

Эксперт HTML/CSS

2253 / 1639 / 644
Регистрация: 07.08.2016
Сообщений: 3,944
А что мешает динамически получать высоту фиксированного блока и менять отступ у нижнего блока?
Регистрация: 18.01.2016
Сообщений: 195

ЦитатаСообщение от AlexZaw Посмотреть сообщение

А что мешает динамически получать высоту фиксированного блока и менять отступ у нижнего блока?
И как это реализовать?

Эксперт HTML/CSS

2253 / 1639 / 644
Регистрация: 07.08.2016
Сообщений: 3,944
Примерно так:

1 2 3 4 5 6
div id="fixed"> img src="http://placekitten.com/g/1000/200" alt=""> /div> div id="content"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Inventore sit animi ut odio debitis, quas vel voluptatem praesentium, laborum error maiores molestiae nisi expedita eum neque nemo. Molestias, voluptate et. /div>
1 2 3 4 5 6 7
img{ max-width: 100%; } #fixed{ position: fixed; top: 0; }
1 2 3 4 5 6 7 8
var content = document.getElementById('content'); window.onresize = changeMarginTop; function changeMarginTop() { var fixed = document.getElementById('fixed').offsetHeight; content.style.marginTop = fixed + 'px'; } changeMarginTop()

Регистрация: 18.01.2016
Сообщений: 195

ЦитатаСообщение от AlexZaw Посмотреть сообщение

1 2 3 4 5 6 7
var content = document.getElementById('content'); window.onresize = changeMarginTop; function changeMarginTop() { * * var fixed = document.getElementById('fixed').offsetHeight; * * content.style.marginTop = fixed + 'px'; } changeMarginTop()

Супер. Спасибо. Значит все таки нужен JS.
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
Помогаю со студенческими работами здесь

Зафиксировать блок после того как окно браузера достанет
Есть блок, расположен он по центру экрана, как его зафиксировать на экране именно в тот момент.

Зафиксировать блок
Здравствуйте, на сайте имеется номер телефона и адрес с одинаковыми стилями, но при уменьшении окна.

Адаптивный блок с картинкой
Подскажите, как сделать адаптивный блок с рамкой, внутри слева картинка, справа от картинки текст с.

Зафиксировать блок страницы. Подскажите решение
Здравствуйте Подскажите пожалуйста, как можно зафиксировать блок страницы, который находится не.

Или воспользуйтесь поиском по форуму:

Как закрепить картинку, чтобы она не смещалась?

Как закрепить картинку, чтобы она не смещалась? На 2 скр. увеличил масштаб,а на 3 скр. уменьшил масштаб, 1 скр. не изменял вообще. Нужно, чтобы вот так смотрелось даже при увеличении масштаба или уменьшения. Код такой:

style='position:fixed; right: 472px; top:42px; border:0 !important; opacity: 0.8; height: 16px !important; width: 27px !important;' 

Отслеживать

4,316 14 14 золотых знаков 43 43 серебряных знака 93 93 бронзовых знака

Закрепить размер картинки html,css

не могу понять как закрепить картинку в хедере, чтобы при увеличении или уменьшении, картинка не меняла свой размер.
Подключил бутстреп кстати.
Результаты на картинках.
Смотрел другие адаптивные шаблоны верстки, но не могу понять как так разработали что картинка не изменяет свой размер и не оставляет пустые места в контейнере.
Код html:

CSS:
.header background: url(‘img/header_img.jpg’) no-repeat center top;
height: 500px;
>
Подскажите пожалуйста, как реализовать так чтобы картинка в контейнере не изменяла свой размер и не оставляла пустые места в нем?

Дополнен 6 лет назад

Дополнен 6 лет назад

html код

Лучший ответ

теперь в смартфоны не влезет

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *