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

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

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

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

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

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

0
osis

3 ответа

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

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

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

58519873