Arhn - архитектура программирования

Отзывчивые фоновые изображения URL-адреса CSS

У меня есть две кнопки, обе из которых имеют свойство фонового URL-адреса в CSS, поскольку источник изменяется, когда пользователь наводит на них курсор. Это работает отлично, но необходимо указать ширину и высоту, что создает проблему на отзывчивых устройствах. При удалении атрибутов роста и веса картинки исчезают. Как мне сделать мои изображения адаптивными с помощью CSS? Код и исходный код ниже.

Веб-сайт: http://parion.github.io/

HTML одного из изображений:

<a class="sirscribe" href="http://www.youtube.com/channel/UCaAlh3Iy7rAcO3MgD_O3Kkg?sub_confirmation=1"></a>

CSS одного из изображений:

a.sirscribe{
    background:url(http://nikcooper.com/img/Box-sirscribe.png) center top no-repeat;
    height:180px;
    width:480px;
    display:block;
    margin: 0 auto;
}
a.sirscribe:hover{
    background:url(http://nikcooper.com/img/Box-sirscribe-activated.png);
}

Изображение:

Не завис

Наведите курсор

html css responsive-design twitter-bootstrap
21.05.2014

  • Вы можете использовать background-size: 100% auto;, background-size: auto 100%; или background-size: cover; 21.05.2014
  • Видите ли, я уже пробовал это, но для отображения изображения требуется высота или ширина. И если я ввожу эти параметры, изображение отказывается изменять размер. 21.05.2014
  • background-size cover заставляет изображение заполнять 100% высоты/ширины контейнера. Вам не нужно устанавливать высоту/ширину на самом изображении, но вам нужно установить высоту/ширину на контейнере, и нет никакого способа обойти это. 21.05.2014
  • Кроме того, я бы предложил использовать спрайт изображения для ваших эффектов наведения, это устранит ту долю секунды, когда изображение исчезает во время загрузки изображения наведения. 21.05.2014

Ответы:


1

Установите размер контейнера (ваш элемент a). Вы можете использовать max-width и/или max-height, чтобы сделать его отзывчивым. Затем добавьте это в CSS:

a.sirscribe{
    background:url(http://nikcooper.com/img/Box-sirscribe.png) center no-repeat;
    background-size:contain;
    height:180px;
    width:480px;
    display:block;
    margin: 0 auto;
}
21.05.2014
  • Не могли бы вы показать мне свой метод установки размера контейнера и использования свойств max-width min-width? 21.05.2014
  • Это действительно зависит от вашего макета. Если вы не зададите явно ширину и высоту элемента a, размер будет равен нулю — вот почему вы не видите изображение. Вы можете установить размер в процентах, ems или rems и использовать max-width, чтобы он не становился слишком большим на больших экранах. Или вы можете использовать абсолютное позиционирование, если хотите, чтобы размер был получен из внешнего контейнера. 21.05.2014
  • Сладкий! На самом деле я удалил только атрибут ширины, и он стал заполнять всю сетку. Спасибо за это! 21.05.2014

    • 2
  • Ни один из ваших способов не помог. Они также не работали, когда я удалил параметры высоты и ширины. 21.05.2014
    • Новые материалы
    Коллекции публикаций по глубокому обучению
    Последние пару месяцев я создавал коллекции последних академических публикаций по различным подполям глубокого обучения в моем блоге https://amundtveit.com - эта публикация дает обзор 25..
    Представляем: Pepita
    Фреймворк JavaScript с открытым исходным кодом Я знаю, что недостатка в фреймворках JavaScript нет. Но я просто не мог остановиться. Я хотел написать что-то сам, со своими собственными..
    Советы по коду Laravel #2
    1-) Найти // You can specify the columns you need // in when you use the find method on a model User::find(‘id’, [‘email’,’name’]); // You can increment or decrement // a field in..
    Работа с временными рядами спутниковых изображений, часть 3 (аналитика данных)
    Анализ временных рядов спутниковых изображений для данных наблюдений за большой Землей (arXiv) Автор: Рольф Симоэс , Жильберто Камара , Жильберто Кейрос , Фелипе Соуза , Педро Р. Андраде ,..
    3 способа решить квадратное уравнение (3-й мой любимый) -
    1. Методом факторизации — 2. Используя квадратичную формулу — 3. Заполнив квадрат — Давайте поймем это, решив это простое уравнение: Мы пытаемся сделать LHS,..
    Создание VR-миров с A-Frame
    Виртуальная реальность (и дополненная реальность) стали главными модными терминами в образовательных технологиях. С недорогими VR-гарнитурами, такими как Google Cardboard , и использованием..
    Демистификация рекурсии
    КОДЕКС Демистификация рекурсии Упрощенная концепция ошеломляющей О чем весь этот шум? Рекурсия, кажется, единственная тема, от которой у каждого начинающего студента-информатика..