Адаптивное изображение с текстом на любой ширине экрана
У меня есть изображение с текстом, и мне нужно убедиться, что текст на изображении отображается на любой ширине экрана как для небольших портативных мобильных телефонов, так и для больших настольных компьютеров.
У меня проблема в том, что изображение обрезается на экранах меньшего размера, а зазор вокруг изображения меняется при разной ширине экрана.
Можно ли обеспечить изменение размера изображения при любой ширине экрана и всегда отображать все изображение, а также сохранять одинаковые отступы/пространства до и после изображения?
Он всегда должен отображать всю ширину экрана.
Вот мой HTML и CSS. Я готов использовать jQuery, если это необходимо.
.nav-primary {
background-color: #222;
color: #fff;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 999;
height: 32px;
}
.custom-header {
background-image: url('https://i.ibb.co/SwSktxv/desktop.png');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
height: 250px;
}<nav class = "nav-primary"></nav>
<header class = "custom-header"></header>Я не понимаю, как его можно «отрезать», когда вы используете background-size: contain. "и зазор вокруг изображения меняется при разной ширине экрана" - конечно, из-за background-size: contain - изображение пропорционально масштабируется, чтобы его можно было полностью показать во всех ситуациях; и это, конечно, оставляет различные «пробелы» внутри самого элемента div с фиксированной высотой.
Почему вы изначально используете это в качестве фонового изображения? Особенно, когда он явно содержит релевантный (?) текст, его лучше встроить с помощью элемента img (чтобы вы могли поместить текстовое содержимое в атрибут alt в качестве подходящей альтернативы для пользователей, которые не смогут прочитать его с изображения). сам.)
@CBroe Спасибо. Я распечатал выходные данные, используя PHP с тегом изображения, который теперь работает намного лучше, за исключением того, что фиксированная панель навигации закрывает верхнюю часть изображения на настольных компьютерах из-за позиции: исправлено;. Любая помощь CSS в этом вопросе будет оценена по достоинству.
Если ваша панель навигации закрывает изображение еще до того, как произойдет какая-либо прокрутка, поскольку изображение находится прямо вверху, вам нужно переместить его дальше вниз, например, присвоив телу соответствующий отступ-верх или что-то в этом роде.
Ответы 1
Вы можете обеспечить полное и единообразное отображение вашего изображения на экранах разных размеров, используя background-size: Cover; и процентное заполнение для обеспечения одинакового расстояния вокруг изображения.
.custom-header {
background-image: url('https://i.ibb.co/SwSktxv/desktop.png');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
height: 250px; /* Adjust this value as needed */
padding: 10% 0; /* Adjust the percentage values for top and bottom padding */
}
Это позволит изображению покрывать всю область заголовка, сохраняя при этом соотношение сторон, а процентное заполнение обеспечивает постоянное пространство вокруг изображения независимо от ширины экрана.
Я не знаю, решит ли это вашу проблему или нет, но я надеюсь, что это будет вам полезно. 🙂
Требование состоит в том, чтобы все изображение было видимым. крышка этого не делает.
положение: фиксированное; проблема только на настольных компьютерах, на мобильных устройствах она удалена
Мне неясно требование: как может изображение, которое должно быть на всю ширину любого окна просмотра, всегда иметь место по вертикали, чтобы поместиться в это окно просмотра? Помните, что соотношение сторон области просмотра может быть любым, как и соотношение сторон изображения.