在CSS中操作div SVG背景viewBox进行响应式设计

Question

I have a div element which has an SVG image as a background and position-x: right . The div contains two h1 lines whose length differs from page to page.

I want to apply a script or a CSS rule that changes the viewBox of the SVG depending on the screen width. The final object should be able to crop the left side of the SVG according to screen-element proportions.

Is there a way to make this possible?

Here are some mockups.

Currently, I use the following CSS rules:

 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> 

However, on mobile screens it may end up like this:

Also, though I apply position-x: right on the SVG, it doesn't quite end up on the right side of the div:

Is there a clean way to do this? I am open for JavaScript solutions as well.

Answer 1

I think you might be approaching this the from the wrong angle (or at least a more difficult one). From what I can tell you're going to need rules for every single page.

A better solution would be a way to style it where the styling adjusts to the width of the content. I would wrap the text in an DIV and use a pseudo element for the angled edge. With this approach the DIV will expand to whatever the size the text is.

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