Вопрос по background-image в css?

262
15 февраля 2018, 13:36

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

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

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

Answer 1

Свойство 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

Answer 2

Нашел решение своей проблемы: именно в случае с 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">

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

READ ALSO
Смена изображений по клику jquery
CSS

Смена изображений по клику jquery

Нужно чтобы было 2 больших изображенияНо после клика на одну из миниатюр, второе увеличенное изображение пропадает

 300
tbody и display: flex в IE
CSS

tbody и display: flex в IE

Есть таблица, которая прекрасно отображается во всех браузерах кроме IE разных версийВыяснил, что в нем tbody не реагирует на display: flex;

 338
Выпадающее меню в Wordpress
CSS

Выпадающее меню в Wordpress

Подскажите где искать стили выпадающего дочернего меню? Необходимо изменить положение дочерних меню на страницеТема twentysixteen

 283
Сформировать запрос на SQL
MySQL

Сформировать запрос на SQL

У меня есть стандартный запрос вида для для KNPpaginator

 287