0

Подскажите как решить эту задачу?

Есть Bootstrap 4 - Row, ему в стилях в отдельном классе указан background-image файл в формате svg. Row автоматически растягивается по ширине на всю страницу с фиксированным размером по высоте.

Вопрос: Как сделать так чтоб background-image всегда заполнял 100% размеры Row - по высоте и ширине. То есть - нужно чтоб background-image растягивался на весь Row без сохранения пропорций так как высота у нас фиксированная а ширина зависит от разрешения экрана.

2 ответа 2

1

Нашел решение своей проблемы: именно в случае с SVG файлами для того чтоб все нормально растягивалось на весь экран без сохранения пропорций, нужно обязательно чтоб в файле svg было указано preserveAspectRatio="none" , тогда все будет нормально растягиваться как и с png и jpg файлами.

Вот что было:

<svg width="1440px" height="381px" viewBox="0 0 1440 381" version="1.1" 
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

Стало:

<svg viewBox="0 0 1440 381" preserveAspectRatio="none" version="1.1" 
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

Может кому пригодится. Спасибо!

0

Свойство background-size?

{
    background-image:    url(images/background.svg);
    background-size:     100% 100%;                     
}

Для сохранения пропорций используется специальные значения contain или cover.

Соус: https://www.quackit.com/html/codes/html_stretch_background_image.cfm

1
  • Спасибо за ответ, и за ссылку - в этом примере все работает, и действительно помогло мне понять что не так. Но в примере используются gif или png файлы - в случае с ними все ок , а у меня svg - и это почему то не работает именно с svg =( 13 фев 2018 в 16:37

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.