Блог

Главная - Вопросы по программированию - Сделать так, чтобы фоновое изображение закрывало div, растягивая, без сохранения соотношения сторон

Сделать так, чтобы фоновое изображение закрывало div, растягивая, без сохранения соотношения сторон

#css #sass #background-image

Вопрос:

Как мне сделать так, чтобы фоновое изображение закрывало div путем растяжения, чтобы все изображение всегда было видно, а не как background-size: cover, где соотношение сторон не меняется?

Это не фиксированная ширина, она должна быть отзывчивой.

 div {
  position: relative;

  amp;:after {
    content: ' ';
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    opacity: 0.3;
    background-image: url('/something.svg');
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: cover;
 }
}

Я попробовал background-size: 100% 100%, также попробовал с тегом img.

Спасибо!

Комментарии:

1. background-size: auto ? w3schools.com/cssref/tryit.asp?filename=trycss3_background-size

2. Удалите пробел content: "" и замените background-position: 0 0; на background-position: center center;

3. Спасибо! В реальном svg была проблема, я опубликовал ответ.

Ответ №1:

Если растяжение не является проблемой, то для тега img

 <style>
img{
  /*
  Control only width or height if u don't want it to stretch. If that's not a problem then you can
  control both of it */
  width:100%;
  height:100%;
}
</style>

<img src="/something.svg" />

Для фоновых изображений :

 <style>
div{
width:100%;
height:100%;
background:url("/something.svg");
background-size:100%;
background-repeat:no-repeat;
}
</style>

<div></div>

Ответ №2:

Оказывается, была проблема и в самом svg. Приведенное ниже решение:

 div {
  position: relative;

  amp;:after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    opacity: 0.5;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% 100%;
  }
}

Я удалил параметры высоты и ширины из моего svg, а также добавил: preserveAspectRatio=»none»

Метки: , , ,