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 that you have read and understand our privacy policy and code of conduct.

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