Ensure that the responsive SVG image remains centered even when resizing

I have been attempting to center crop the responsive SVG image while resizing.

Even though I used 

preserveAspectRatio="xMidYMax slice"
, the image width does not stay consistent with my screen size.

body{
  margin:0;padding:0;
}

.wrapper {
position: relative;
width: 100%; 
min-width: 100%;
vertical-align: middle; 
margin: 0;
}


.bg-svg {
display: inline-block;
position: absolute; 
top: 0; left: 0; 
width: 100%;
}
<div class="wrapper">
   <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  d="0px" y="0px"
     width="1920px" height="1080px" viewBox="0 0 1920 1080" preserveAspectRatio="xMidYMax slice" class="bg-svg">
  <rect fill="#DACFB9" width="1920" height="1080"/>
  <rect x="719" y="296" fill="#EF6544" stroke="#FFFFFF" stroke-miterlimit="10" width="482" height="482"/>
  <rect x="1438" y="296" fill="#AFFF84" stroke="#D3D2D2" stroke-miterlimit="10" width="482" height="482"/>
  <rect x="1" y="296" fill="#7AEEFF" stroke="#D3D2D2" stroke-miterlimit="10" width="482" height="482"/>
  <text transform="matrix(1 0 0 1 841 557)" font-family="'GothamBlack'" font-size="60">MIDDLE</text>
  </svg> 
</div>

I am striving to achieve a result similar to this Codepen demonstration, but without using a background image.

csshtmlsvgresponsiveness

Answer №1

The key issue you were facing is that your SVG needed to include the attributes:

width="100%" height="100%"

This ensures that it fills the containing element properly. Additionally, there were some unnecessary CSS declarations in your code.

body{
  margin:0;
  padding:0;
}

.wrapper {
  width: 100%; 
  height: 100vh;
}
<div class="wrapper">
   <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%"
     viewBox="0 0 1920 1080" preserveAspectRatio="xMidYMid slice" class="bg-svg">
  <rect fill="#DACFB9" width="1920" height="1080"/>
  <rect x="719" y="296" fill="#EF6544" stroke="#FFFFFF" stroke-miterlimit="10" width="482" height="482"/>
  <rect x="1438" y="296" fill="#AFFF84" stroke="#D3D2D2" stroke-miterlimit="10" width="482" height="482"/>
  <rect x="1" y="296" fill="#7AEEFF" stroke="#D3D2D2" stroke-miterlimit="10" width="482" height="482"/>
  <text transform="matrix(1 0 0 1 841 557)" font-family="'GothamBlack'" font-size="60">MIDDLE</text>
  </svg> 
</div>

Answer №2

To achieve the desired result linked to, you need to use background-image. To ensure proper functionality, use this simplified version of svg. Ensure that you include the properties viewBox, xmls, and at least one of either width or height (specified as an integer without units). The svg will then function like any other background image. I am unable to demonstrate this directly here due to linking restrictions, but here is the modified SVG:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="1920" height="1080" viewBox="0 0 1920 1080">
    <rect fill="#DACFB9" width="1920" height="1080"/>
    <rect x="719" y="296" fill="#EF6544" stroke="#FFFFFF" stroke-miterlimit="10" width="482" height="482"/>
    <rect x="1438" y="296" fill="#AFFF84" stroke="#D3D2D2" stroke-miterlimit="10" width="482" height="482"/>
    <rect x="1" y="296" fill="#7AEEFF" stroke="#D3D2D2" stroke-miterlimit="10" width="482" height="482"/>
    <text transform="matrix(1 0 0 1 841 557)" font-family="'GothamBlack'" font-size="60">MIDDLE</text>
</svg>

You can create a similar background effect using the following CSS:

svg {
  min-width: 100%;
  min-height: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
}
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="1920" height="1080" viewBox="0 0 1920 1080">
    <rect fill="#DACFB9" width="1920" height="1080"/>
    <rect x="719" y="296" fill="#EF6544" stroke="#FFFFFF" stroke-miterlimit="10" width="482" height="482"/>
    <rect x="1438" y="296" fill="#AFFF84" stroke="#D3D2D2" stroke-miterlimit="10" width="482" height="482"/>
    <rect x="1" y="296" fill="#7AEEFF" stroke="#D3D2D2" stroke-miterlimit="10" width="482" height="482"/>
    <text transform="matrix(1 0 0 1 841 557)" font-family="'GothamBlack'" font-size="60">MIDDLE</text>
</svg>

If you save this configuration as an SVG file, you can easily apply it as a background image using background-image:

background-image: url(path/to/vector.svg) repeat 50% 50%;

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for shifting a designated row upward in Chrome using JavaScript

Currently, I am working on a Javascript function that moves up a selected row. However, the issue I am facing is that when the row moves up, the old row is not being removed. For instance, if I move up the 'bbbb' row, it successfully moves up bu ...

javascriptjqueryhtmljquery-ui

Determine the minimum width in an HTML table's <td> tags

One issue I have encountered is with the columns in my table. I need each column to adjust its width dynamically based on the size of the browser window. However, I also want to ensure that the columns are not too small. To address this, I attempted to se ...

htmlcsshtml-table

Ways to calculate the total order amount when the quantity is modified

The order entry form includes columns for product name, price, and quantity: <table id="order-products" class="mobileorder-table"> <colgroup> <col style="width: 80%;"> <col ...

javascripthtmlcssjavascript-objectsonblur

Angular conditional operator: running a series of statements

Let's break down the logic: When the enter key is pressed, we want to execute the following conditional statement: if (!elementB.isOpen) { elementB.open(); } else { elementC.open(); elementC.focus(); elementB.close(); } I attempted ...

htmlangular

Ways to showcase HTML table in a four-column layout/grid

Delving into Dynamic HTML table creation, I'm currently using jquery for rendering purposes. At the moment, I am only displaying the table. The Goal I aim to segment my table into four columns or a grid structure Something akin to this: https://i. ...

javascriptjquerycsshtml-table

Creating an artistic blend by layering p5.js drawings over images in an HTML canvas

I'm having a tough time solving this issue. My goal is to overlay circles on top of an image, ideally using HTML for the image. However, I just can't seem to make it work. let img; function setup() { createCanvas(800,800); img = loadImage(&qu ...

htmlcssp5.js

UI experiencing issues with selecting radio buttons

When trying to select a radio button, I am facing an issue where they are not appearing on the UI. Although the buttons can be clicked, triggering a function on click, the selected option is not displayed visually. <div data-ng-repeat="flagInfo in avai ...

javascriptangularjscss

Adjust the scroll bar to move in the reverse direction

I'm trying to modify the behavior of an overlay div that moves when scrolling. Currently, it works as expected, but I want the scroll bar to move in the opposite direction. For example, when I scroll the content to the right, I want the scroll bar to ...

javascripthtmlcsstypescript

Load the page's content gradually, without needing to wait for all the content to be fully loaded

I am facing an issue with a webpage that displays 10 different items, each of which has a slow loading time. Currently, the entire page waits for all 10 items to fully load before displaying anything. I am interested in finding out if it is feasible to sh ...

javascriptphpjqueryhtmlserver

What is the best way to navigate between different areas of an image using html and javascript?

I am currently in the process of learning how to develop mobile applications, and I am still in the early stages. Although this question is not directly related to mobile development, it pertains more to html/css/js. My goal is to create a simple game wh ...

javascripthtmlcssimage

Elastic video player embedded in a flexbox

I'm having an issue trying to make a responsive YouTube embed work inside a flex container alongside other content. The problem is that the container for the YouTube embed doesn't resize properly and ends up overlapping with other elements. To be ...

cssreactjsflexboxmaterial-ui

Get only the text content from a hyperlink using Tinymce-4

Within tinymce.activeEditor, I currently have this line of innerHTML code (part of a ul-list): <li><a href="#">Important words</a></li> When I place the caret within the sentence "Important words," and click a button with the foll ...

javascripthtmltinymce-4

Having trouble showing an image with jQuery after it has been uploaded

Currently, I have a URL that shows an image upon loading. However, I want to provide the option for users to replace this image using a form input. My goal is to display the uploaded image as soon as it's selected so users can evaluate it. I'm a ...

javascripthtmljquery

website with a horizontal scroll-bar

Looking to create a horizontal scrolling website where the divs float to the right without specifying the container's width, as it may vary on different pages. Any suggestions? ...

htmlcss

Apply the CSS style specifically to the initial row in the table

Is there a way to target the first row of a table with a different tr class using CSS? <div id="right"> <table> <tbody> <tr class="head"> <td >Date</td><td>Info</td><td>More</td> </tr> ...

htmlcss

Transform the image background on mouse hover using CSS

On my php page, I am dynamically visualizing thumbnails. To ensure that they are all the same size, I use the following method: <a class="zoom" href="..."> <img src="thumb/default.png" width="130" style="background-image:url(thumb/<?php echo $ ...

css

Unable to use addEventListener on media queries exceeding 768px

When testing the site on Firefox 49 and Chrome 63, I encountered the same issue. Clicking on each card worked fine on iPhone4, Galaxy 5, and iPhone 8 using Chrome. However, after switching orientations from 640px to 320px portrait view, the top card would ...

javascripthtml

"A lengthy contenteditable div designed to mimic an input field, with the ability to horizontally scroll

When the input is too short for the entire text to be displayed, users have the option to horizontally scroll the text inside the input by dragging with the mouse. Is there a way to implement this functionality in a contenteditable field that appears as ...

javascripthtmlcssinputcontenteditable

Tips for emphasizing active tabs in Angular 6

**I have everything displaying perfectly, but I am wondering how to highlight the active tab without using any third-party components. Any assistance would be greatly appreciated. Thank you.** <ul class="tabs"> <li [ngClass]=" {'active-tab ...

htmlangular

Guide to dynamically add data to two columns

I have a challenge with organizing multiple inputs into rows with two columns each, ensuring that each input is appended to the appropriate side (50% for each column unless there's an odd number of inputs). Currently, the inputs are being added to se ...

javascriptjqueryhtml