Есть ли способ сохранить качество фонового изображения при масштабировании вверх?

-1

В настоящее время я пытаюсь установить фоновое изображение для этого приложения для игрушек, над которым я работаю. Глядя вокруг на SO, я увидел, что следующий код рекомендуют:Есть ли способ сохранить качество фонового изображения при масштабировании вверх?

body { 
background: url(../images/download.jpeg) no-repeat center center fixed; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 
}

Однако качество изображения по-прежнему выглядит ужасно на моем рабочем столе. Исходными размерами изображения являются 168px (h) и 300px (w).

Любая помощь приветствуется!

источник

2016-01-31 Timoor Kurdi

Если вы нашли решение для небольших изображений, размер которых был изменен в больших версиях без потери качества, вы должны предложить его как услугу и оплатить большую сумму $ ^^ Но без шуток небольшое изображение всегда будет выглядеть ужасно, если вы масштабируете его вверх более чем немного. – migg

Ах, так что я преследовал призраков всей команды, пытаясь найти способ сделать это, спасибо за ваш ответ! и да, если я найду способ, я обязательно буду заряжать mucho dinero :) –

Золотое правило для * растровых изображений должно начинаться с большого, а затем идти меньше. Не наоборот. – Scott

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

источник

2016-01-31 21:53:49 spacegeek224

Вам нужно будет преобразовать существующее изображение или найти изображение в векторном формате (.svg, .eps и т. Д.). это позволит вам масштабировать изображение без его пикселизации, как это часто бывает с форматами растровых изображений (.jpg, .png и т. д.).

Если вы заинтересованы в различии между векторными и растровыми изображениями, смотрите следующие отрывки из this article на Растре против векторных изображений: размеры

растровых изображений измеряется в пикселях. Поскольку растровые изображения не могут быть увеличены без потери качества, разные поставщики имеют специфические требования к размерам для своих процессов; они требуют определенного разрешения пикселей: определенное количество пикселей в каждом дюйме. Количество пикселей в каждый дюйм в изображении представляет разрешение изображения пикселя или PPI (пикселей на дюйм)

...

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

надеюсь, что это поможет!

источник

2016-01-31 21:53:54 DeveloperACE

Это, безусловно, полезно знать! Благодарим вас за подробный ответ. –

без проблем @TimoorKurdi – DeveloperACE

Есть разные способы приблизиться к этому. Код CSS, который вы опубликовали, в основном, принимает ваше изображение и растягивает его, поэтому он охватывает весь элемент вашего сайта (который в основном имеет размер экрана браузера) <body>.

Невозможно сделать небольшое изображение хорошим при взрыве. Что можно сделать, это хранить разные размеры изображения и использовать медиа-запросы для загрузки определенных изображений на основе размера экрана.

Допустим, вы хранить 3 разных размеров:

image_large.jpg (2000 x 2000) 
image_medium.jpg (1000 x 1000) 
image_small.jpg (500 x 500)

Вы можете использовать CSS, чтобы загрузить подходящий в зависимости от размера экрана:

@media screen and (min-width: 0px) and (max-width: 1000px) { 
    body { 
     background: url(../images/image_small.jpg) no-repeat center center fixed; 
     -webkit-background-size: cover; 
     -moz-background-size: cover; 
     -o-background-size: cover; 
     background-size: cover; 
    } 
} 

@media screen and (min-width: 1001px) and (max-width: 2000px) { 
    body { 
     background: url(../images/image_medium.jpg) no-repeat center center fixed; 
     -webkit-background-size: cover; 
     -moz-background-size: cover; 
     -o-background-size: cover; 
     background-size: cover; 
    } 
} 

@media screen and (min-width: 2001px) { 
    body { 
     background: url(../images/image_large.jpg) no-repeat center center fixed; 
     -webkit-background-size: cover; 
     -moz-background-size: cover; 
     -o-background-size: cover; 
     background-size: cover; 
    } 
}

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

источник

2016-01-31 22:00:23

Есть ли способ сохранить качество фонового изображения при масштабировании вверх?

ответ

Смежные вопросы