通过拉伸而不是保持纵横比使背景图片覆盖 div

Question

如何通过拉伸使背景图片覆盖div，使整个图片始终可见，而不是像background-size: cover那样，纵横比不变？

它不是固定宽度，它必须是响应式的。

div {
  position: relative;

  &: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 标签。

谢谢！

Answer 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>

Answer 2

原来实际的svg也有问题。解决方案如下：

div {
  position: relative;

  &: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"

通过拉伸而不是保持纵横比使背景图片覆盖 div

Make background image cover div by stretching, not maintaining aspect ratio

css

sass

background-image