html - 在 CSS 中操作 div SVG 背景 View 框以实现响应式设计

Question

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

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

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

这是一些模型。

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

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%;
  }
}

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

然而，在手机屏幕上它可能会像这样结束:

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

有没有一种干净的方法来做到这一点？我也对 JavaScript 解决方案持开放态度。

Answer 1

我认为您可能从错误的 Angular (或至少是更困难的 Angular )来处理这个问题。据我所知，每个页面都需要规则。

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

.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;
}

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