Как сохранить фоновое качество изображения четким?

Question

Я работаю с платформой опроса, и в этой платформе я использую предопределенный шаблон для опроса. Платформа допускает CSS-модификации, и я стараюсь, чтобы качество изображения заголовка не уменьшалось. Изображение загружается как 1170 * 295, но должно отображаться как 760 * 192.

Платформа предлагает простой вариант загрузки заголовка изображения, но только для определенного размера. У моего изображения "высота" ниже, чем у стандартного.

Такие вещи, как image-rendering: crisp-edges; (или -webkit-optimize-contrast) ничего не делают. «Конечный текст» отображается синим цветом (да, я начинающий, и программирование в любой форме не является частью моей работы).

Изображение заголовка

div.questionnaire-header {
   background: url("/images/uploaded/ANFCZ1FSC5C2?width=760&height=192") no-repeat center left;
}

Я надеюсь, чтоизображение заголовка отображается четким, четким и не размытым текстом.

Answer 1

Ваше изображение растягивается, чтобы соответствовать размеру заголовка. Не существует простого способа улучшить изображение в CSS и сохранить его качество. Либо измените ширину заголовка на 760 пикселей, либо найдите изображение размером больше 1170 x 295

Answer 2

Установите свойство background-size равным 100% вашего изображения, чтобы заполнить элемент изображения.

Answer 3

Установите для свойства background-size значение 100%, чтобы наше изображение заполняло элемент изображения. Установите для свойства background-position значение 50% 50%, чтобы выровнять фоновое изображение внутри элемента изображения.