Вопрос по twitter-bootstrap, background-image, responsive-design, css – Bootstrap Адаптивное масштабирование изображений

9

С помощьюTwitter Bootstrap Я понимаю, что по умолчанию он реагирует на масштабирование изображений. Это здорово, но неЯ всегда идеален.

Скажем, например, у меня есть500x300 изображение на рабочем столе, затем оно изменяет размеры для мобильных устройств, так что изображение будет очень маленьким и не очень высоким, теряя большую часть детализированных частей изображения.

Я видел, как другие сайты на самом деле нене нужно масштабировать изображение, а использовать родительский div для сортировкиmask изображение. (http://www.fitnessfireworks.com был отличный пример этого, более недоступен.)

Каков наилучший метод для достижения этой цели? СочетаниеCSS фоновое изображение и масштабирование фонового изображения? Просто ищу лучшие практики.

Ваш Ответ

3   ответа
15

как другие сайты на самом деле нене нужно масштабировать изображение, а использовать родительский div для сортировки изображения

Если вы изучитеCSS на странице, которую вы упомянули, вы увидите, что вместо использования встроенных изображений они обычно определяют div с фоновыми изображениями и используютCSS лайк

#some-div {
background-size: 100%;
background-size: cover;
background-position: center center;
vertical-align: top;
background-image: url(/.../image.jpg);
}  

Вот'Пример того, как вы можете получить совершенно разные результаты с масштабированием встроенного изображения по сравнению с.background-image

http://www.bootply.com/67094

Ключом ко второму методу является использование background-size: cover и управление размером div (и, следовательно, размером background-image).

http://css-tricks.com/perfect-full-page-background-image/ имеет хорошую информацию о вариантах и вариантах с.background-cover

0

яИспользовать два изображения, используя разные объявления классов. Внешние инструменты всегда будут лучше масштабировать изображения, чем браузер, делающий это на лету.

Да, качество есть. Я также планирую использовать 2x изображения, чтобы они хорошо выглядели на экранах сетчатки. Nic Hubbard
1

этот статья полезная. Он объясняет, как оптимизировать изображения для адаптивного отображения и избежать нескольких загрузок изображений.

Похожие вопросы