У меня есть изображение, которое я хочу отобразить в качестве фонового изображения нижнего колонтитула. Он должен отображаться на 100% ширине всех размеров экрана, но в настоящее время он отображается правильно на маленьких экранах, тогда как на больших экранах он отображается только в центре экрана, причем обе стороны остаются свободными, что мне не нужно.
Вот Css, который я использовал для установки фонового изображения нижнего колонтитула Div:
.footer-shadow {
position:relative;
height: 237px;
margin-top:0px;
width: 100%;
background: url('../img/new_images/footer-bg.png') center center no-repeat;
background-size: contain;
color: gray;
}
Пожалуйста, помогите мне сделать нижний колонтитул отзывчивым, чтобы изображение соответствовало всем размерам экрана.
Благодарность
3 ответа
Если вы хотите, чтобы изображение всегда было на 100% шириной, используйте следующий CSS
.footer-shadow {
background-size: 100%;
}
Это автоматически делает ширину фонового изображения 100% и соответствующим образом масштабирует высоту. В настоящее время вы используете background-size: contain;, который масштабирует изображение до «максимального размера, чтобы и его ширина, и его высота могли уместиться внутри области содержимого».
Заменить
background-size: contain;
От
background-size: cover;
Используйте свойство background-size:cover;, которое растягивает ваше изображение до размера (включая обрезанную область), но может некорректно отображаться во многих браузерах, для которых вам нужно добавить дополнительные параметры webkit для firefox и IE, например:
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
Похожие вопросы
Новые вопросы
html
HTML (язык гипертекстовой разметки) — это язык разметки для создания веб-страниц и другой информации, отображаемой в веб-браузере. Вопросы относительно HTML должны включать минимальный воспроизводимый пример и некоторое представление о том, чего вы пытаетесь достичь. Этот тег редко используется отдельно и часто в паре с [CSS] и [JavaScript].
background-size: cover;"масштабирует фоновое изображение до максимально возможного размера, чтобы область фона полностью закрывалась фоновым изображением. Некоторые части фонового изображения могут быть не видны в пределах области позиционирования фона". обрезка.