Исправьте изменение размера фонового изображения div с помощью CSS.

Question

Исправьте изменение размера фонового изображения div с помощью CSS.

0

Я работаю над проектом версии моего веб-сайта, который использует более отзывчивый дизайн, чем оригинал, и столкнулся с проблемой, из-за которой изменились размеры кнопок навигации в браузере CSS. Я могу получить divs для изменения размера, но не самих изображений.png.

Ниже приведен код кнопки "Главная". Я установил div для изменения размера до 11,5%, потому что когда он отображается рядом с другими кнопками, все они имеют уникальные размеры и прекрасно вписываются в родительский div.

Любая помощь очень ценится :) спасибо за то, что посмотрели!

#homebut
{
display:inline-block;
width:158px;
height:40px;
max-width:11.5%;
max-height:100%;
text-align:center;
background:url(images/buttons/wawhomeroll.png) no-repeat 0 0;
background-position:center top;
background-size:auto;


}

#homebut:hover
{
background-position:0 -40px;
background-position:center bottom;

}

#homebut: span
{
position:absolute;
top: -999em;

}

Jay Bignell 17 фев. 2014, в 01:18

Источник

0

если я помню - фоновый размер: 100% 100%; работает - auto это размер изображения - и / или скажем background-size: 100% auto для сохранения соотношения сторон
Rob Sedgwick 16 фев. 2014, в 23:41
0

Потрясающие! Применение фона размером: 100% авто; Теперь они масштабируются правильно! кажется, сделал это! Мне просто нужно повозиться с атрибутом hover и самими изображениями, и все будет готово. Спасибо @RobSedgwick
Jay Bignell 17 фев. 2014, в 01:00
0

Отличный материал, Джей. Выкину это как ответ. Интересный размер фона: обложка тоже от @rocknrollcanneverdie
Rob Sedgwick 17 фев. 2014, в 01:29

Показать ещё 1 комментарий

Теги:

html

css

background

image

resize

2 ответа

Ещё вопросы

если я помню - фоновый размер: 100% 100%; работает - auto это размер изображения - и / или скажем background-size: 100% auto для сохранения соотношения сторон
Потрясающие! Применение фона размером: 100% авто; Теперь они масштабируются правильно! кажется, сделал это! Мне просто нужно повозиться с атрибутом hover и самими изображениями, и все будет готово. Спасибо @RobSedgwick
Отличный материал, Джей. Выкину это как ответ. Интересный размер фона: обложка тоже от @rocknrollcanneverdie

Rob Sedgwick · Answer 1 · 2014-02-16T23-10-00.000Z

Как комментарии background-size:100% auto;

#homebut {
   display:inline-block;
   width:158px;
   height:40px;
   max-width:11.5%;
   max-height:100%;
   text-align:center;
   background:url(images/buttons/wawhomeroll.png) no-repeat 0 0;
   background-position:center top;

   background-size:100% auto;

  }

rocknrollcanneverdie · Answer 2 · 2014-02-16T21-35-00.000Z

Попробуйте background-size: cover; ,

Обложка Это ключевое слово указывает, что фоновое изображение должно быть масштабировано как можно меньше, при этом оба его размера больше или равны соответствующим размерам области позиционирования фона.