在CSS中操作div SVG背景视图框以进行响应式设计

Question

我有一个div元素，其中SVG图像作为背景，position-x: right。 div包含两条h1行，其长度因页面而异。

我想应用一个脚本或CSS规则，根据屏幕宽度更改SVG的viewBox。最终对象应该能够根据屏幕元素比例裁剪SVG的左侧。

有没有办法让这成为可能？

以下是一些模型。

目前，我使用以下CSS规则：

＆＃13;

＆＃13;

h1{
  font-family: "Tahoma", sans-serif;
  font-size: 52px;
  }

.div {
  background: #000 no-repeat right; /* think of the SVG from the examples here */
  color: #fff;
  display: inline-block;
  padding: 56px 180px 56px 7%;
  margin-right: auto;
}

.container{
  background: none;
  margin: 0;
  padding: 0;
}

@media(max-width: 450px){
  .div {
    padding: 20px 50px 20px 7%;
  }
}

＆＃13;

<div class="div">
   <div class="container">
     <h1>Feel free</h1>
     <h1>To change this</h1>
   </div>
</div>

＆＃13;

＆＃13;

＆＃13;

但是，在移动设备屏幕上，它可能最终会像这样：

另外，虽然我在SVG上应用了position-x: right，但它并没有完全位于div的右侧：

有干净的方法吗？我也对JavaScript解决方案持开放态度。

Answer 1

我认为你可能从错误的角度接近这个（或者至少是一个更难的角度）。据我所知，每个页面都需要规则。

更好的解决方案是在样式调整到内容宽度的地方设置样式。我将文本包装在DIV中并使用伪元素作为倾斜边缘。通过这种方法，DIV将扩展到文本的大小。

＆＃13;

＆＃13;

.featured {
  position: relative;
}
.text,
.text:after {
  background-color: skyblue;
}
.text {
  position: absolute;
  top: 150px;
  left: 0;
  display: inline-block;
  padding: 1rem 2rem;
  z-index: 5;
}
.text:after {
  display: block;
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: -20px;
  width: 50px;
  transform: skew(-15deg);
  z-index: -1;
}

＆＃13;

<div class="featured">
  <img src="https://placehold.it/1200x400/fc0/&text=bg">
  <div class="text">
    <h2>Some text goes here.</h2>
    <h2>Some other text goes right here.</h2> 
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;