Как растянуть картинку (тег Img) на всю ширину экрана не меняя высоты?
Нужно растянуть картинку в теге img на всю ширину (выравниване по центру) при этом сохраняя ее изначальную высоту? Т.е. по ширине показывается не вся часть. а только та, которая попадает под размеры экрана.
Т.е. также как при использовниии background url() center no-repeat;
- Вопрос задан более трёх лет назад
- 10309 просмотров
Комментировать
Решения вопроса 3
Обитаю в 1С-Bitrix
родителю задайте overflow: hidden;
А картинке нужный размер в пикселях.
Ответ написан более трёх лет назад
Комментировать
Нравится 1 Комментировать
Андрей Хохлов @andrhohlov
Блок с position:relative и overflow: hidden
Картинке position: absolute и внутрь этого блока, по его центру
Ответ написан более трёх лет назад
Комментировать
Нравится Комментировать
ASP.NET программист
А чем использование бэкграунда не устраивает?
Можно использовать контейнер (div к примеру), и указать ему overflow:hidden
Ответ написан более трёх лет назад
issssrt @issssrt Автор вопроса
Я использую слайдер, который в теге li>img прописываются изображения. Фишка в том что он подгоняет высоту по ширине 100%, а мне по макету нужно высоту строго как в оригинале. Либо найти подходящий слайдер .
Растянуть картинку на весь блок
Чтобы растянуть картинку на весь блок, надо указать свойство background-size: cover .
.bg < background: url(image.jpg) no-repeat; background-size: cover; >
Обновлено: 01 ноября 2020
Комментарии
Авторизуйтесь, чтобы добавлять комментарии
- Вставить картинку
- Градиент
- 4 видов границ (border)
- 4 видов тени
- Спрайт
- Сделать картинку чёрно-белой
- Растянуть картинку на весь блок
- Несколько картинок на фоне
- Изменить прозрачность объекта
Как расширить экран на весь монитор
Иногда, включив бу компьютер или бу ноутбук с ОС Windows, вы можете обнаружить, что изображение рабочего стола на экране сузилось, или сильно уменьшилось, и окружено черной рамкой. Почему может возникнуть такой сбой, и как расширить экран на весь бу монитор — вы узнаете из этой статьи.
Почему сузился экран — основные причины
- Неверно выставлено разрешение экрана.
- Отсутствуют драйвера видеокарты.
- Пользователь подключил к ПК дополнительный экран.
- Сбились настройки самого монитора.
Как настроить экран, если сбились настройки разрешения
С подобной проблемой пользователи сталкиваются чаще всего после установки (переустановки) операционной системы. Еще одна причина возникновения такой ситуации — изменение пользователем настроек разрешения для определенной видеоигры или программы. Как исправить:
- при помощи правой кнопки мыши, зайдите в настройки рабочего стола;
- найдите “Параметры экрана”, перейдите в меню настроек;
- в строке “Разрешение” подберите значение, при котором изображение рабочего стола заполнит весь экран, без черных рамок и полос. Обычно, оптимальный результат получается при параметрах, отмеченных словом “Рекомендуется”.
Как расширить экран на весь монитор, если пропали драйвера видеокарты
Такая проблема может возникнуть, если вы недавно установили или переустановили ОС Windows 10, либо заменили видеоадаптер. Как правило, в процессе переустановки ОС или замене видеокарты, на ПК автоматически устанавливаются временные драйвера. Если сразу не загрузить специализированные, со временем вы столкнетесь с проблемой сужающегося экрана.
Чтобы убедиться, что причина некорректного отображения изображения — в отсутствии драйверов, зайдите в меню настройки экрана. Вы заметите, что в пункте “Разрешение” пропал выпадающий перечень параметров разрешений (или он сократиться до двух вариантов). Затем зайдите в “Диспетчер устройств”. Здесь в пункте “Видеоадаптеры” будет написано “Стандартный VGA графический адаптер”, а в пункте “Другие устройства” — “Неизвестное устройство”. Как исправить: Загрузите нужные драйвера с диска, что идет в комплектации к видеокарте (или ОС), или загрузите их с сайта производителя (разработчика). Установка драйверов происходит автоматически. После установки, перезагрузите ПК.
Как расширить экран при подключении к ПК дополнительного монитора
Если у вас подключен второй экран, при этом на основном — некорректное отображение рабочего стола, скорее всего, причина проблемы — в подключенном дисплее. Как проверить: Отключите второй экран. Если на основном изображение пришло в норму, значит ваша гипотеза верна.
- зайдите в меню настроек дисплея;
- найдите пункт “Разрешение экрана;
- выберите основной монитор в строке “Экран”;
- установите рекомендуемые параметры в строке “Разрешение”.
Как расширить экран через настройку монитора
Если вы проверили все перечисленные выше причины, и ни одна из них не подходит к вашей ситуации, проблему поможет решить автонастройка монитора. Обратите внимание на ряд кнопок, расположенных на передней или боковой части монитора. Среди прочих, вы заметите кнопку “Auto”. Чтобы запустить процесс автонастройки, достаточно просто на нее нажать.
Как сделать картинку во весь экран шапки ?
Здравствуйте, у меня небольшая проблема картинку получилось вставить в сайт, но не могу сделать во весь экран и хочу заменить её вместо синего фона.
6 ответов
.img-wrap < position: relative; >.img-wrap h1 < position: absolute; left: 250px; bottom: 200px; width: 100%; color: #800000; >.img-wrap h2
спасибо за ответ
а это надо писать в коде или в стиле
images можно убрать из div и переместить его в стили, а диву дать примерно такие стили:
background-image: url('../img/background.png'); background-repeat: no-repeat; background-position: center center; background-attachment: fixed; -o-background-size: 100% 100%, auto; -moz-background-size: 100% 100%, auto; -webkit-background-size: 100% 100%, auto; background-size: 100% 100%, auto;В стилях где будет картинка
Sign up or Log in to write an answer
- Интерактивные уроки и курсы программирования и создания сайтов (дистанционное обучение) помогут вам в игровой форме изучить основы языков программирования веб-разработки и веб-программирования с нуля. Обучение онлайн 24/7.
Общие ссылки
- Отзывы
- Политика конфидециальности
- Условия использования
- Блог
- Цена и оплата
- Курсы и скринкасты
- Сертификаты
- Партнерская программа
- Комьюнити
Наши курсы и скринкасты
- HTML/CSS Advanced
- Bootstrap 4
- Vue JS
- Linux, GIT and web-hosting
- HTML and CSS
- Modern Javascript
- Javascript/jQuery
- Codeigniter
- Все курсы и скринкасты