SVG with complete coverage of width and height

Here's the challenge: create a full window svg image with aspect distortion without using an SVG tag. Why avoid the SVG tag? Because I plan to replace the SVG later on (possibly frequently) and haven't found a simple way to do so.

Previous attempts:

  <!-- My styles are in a css file, but for demonstration purposes, 
       they are inline style attributes -->

  <!-- Works in Webkit but not in Firefox; Firefox blocks stretching 
       and centers the svg within the tag -->
  <img src="my.svg" style="width:100%;height:100%;
       position:fixed;top:0;left:0;bottom:0;right:0;" />

  <!-- Both Webkit and Firefox prevent distortion, causing the svg 
       to be centered in the div instead of conforming to its dimensions -->
  <div style="width:100%;height:100%;position:fixed;top:0;
       left:0;bottom:0;right:0;background-size:cover;
       background-image:url(my.svg);" />

I have also attempted:

 background-size:contain;
 background-size:cover;
 background-size:100% 100%;
 background-postion: center center;

but unfortunately, no success yet.

csssvg

Answer №1

I managed to get this code working smoothly across Firefox, Chrome, and Safari.

<img src="my.svg" style="width:100%;height:100%;position:fixed;top:0;left:0;bottom:0;right:0;" />

The key was ensuring that the SVG I used had preserveAspectRatio="none" specified at the root. Additionally, I either removed the viewBox attribute from the SVG or made sure it tightly enclosed the image content.

As shown in this example:

<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 5 3">
    <desc>Flag of Germany</desc>
    <rect id="black_stripe" width="5" height="3" y="0" x="0" fill="#000"/>
    <rect id="red_stripe" width="5" height="2" y="1" x="0" fill="#D00"/>
    <rect id="gold_stripe" width="5" height="1" y="2" x="0" fill="#FFCE00"/>
</svg>

If possible, ensure you have control over the contents of the SVG files for optimal display. :-)

Answer №2

Check out this awesome solution using jQuery for manipulating SVG images without the need for <svg>

Here is the CSS:

#bgImage{
    position:absolute;
    left:0;
    top:0;
}

And here is the HTML:

<object width="10" height="10" id="bgImage" data="resources/runner.svg" type="image/svg+xml"></object>

Lastly, the JavaScript code:

//Function to resize the background image
function adjustImageSize($element){
    var imageRatio = $element.width() / $element.height();
    var screenRatio = $(window).width() / $(window).height();

    if(imageRatio > screenRatio){
        $element.height($(window).height());
        $element.width($(window).height()*imageRatio);
    } else {
        $element.width($(window).width());
        $element.height($(window).width()/imageRatio);
    }
}

Call the function on "onresize" and "onload" events to resize the image dynamically:

$(window).on('resize', function(){
    adjustImageSize($("#bgImage"));
});

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

JavaScript - Image style alterations are not operating as expected

Let me break it down for you: onmouseover="imageOn(bg-index);" onmouseout="imageOff(bg-index);" I've got these two attributes set on a table tagged with ID table-title. These functions are included in an external JS file: If the name is 'bg-i ...

javascripthtmlcssimage

Flexbox not rendering correctly on IE and Chrome browsers

Initially, I avoided using flexboxes because of concerns about older browser support. However, the alternative involved floats, margins, z-indexes, and resulted in a layout that was visually unattractive. Despite setting specific dimensions for the left-h ...

htmlcssflexbox

Why does the HTML and CSS slider fail to load upon page refresh, yet works perfectly when the next or previous button is clicked?

There seems to be an issue with the slider images not loading on page refresh. Oddly enough, they appear only after clicking the next button. However, upon refreshing the page again, the images disappear. <div class="slide-banner"> < ...

javascripthtmlcss

The footer seems to be malfunctioning

Let's start with the code: CSS: *{ margin:0; padding:0; } body,html{ height:100%; } body{ background:url('../images/bg.png'); background-position:center; background-repeat:no-repeat; background-attachment:fixed; height:100%; ...

htmlcss

I am attempting to display the Δ symbol on my website, however, it is not appearing on the webpage

In my attempt to display my company logo on the website, I encountered an issue where the Δ symbol is not appearing correctly in the browser. strong class="footer-logo">KyΔnsys</strong To address this problem, I have implemented unicode charset=" ...

htmlcssbrowsersymbolsgraphical-logo

Combine multiple SCSS files located in various directories into a single CSS file by using NPM

In my project, there are SCSS files stored in a "static" directory. Additionally, I have application components located in a separate directory, each containing its own SCSS file. I am seeking a way to compile all of these SCSS files into a single .css fi ...

cssnode.jsnpmsass

What is the process for adjusting the checkbox border color in Material Design 15 and above?

Ever since the latest update to Angular Material 15, I've noticed some changes in how styling is applied to Angular Material components. Previously, in version 14, I used to be able to accomplish styling changes with code like this: ::ng-deep .mat-che ...

cssangular-material

How can I ensure that the div remains fixed on scroll and appears directly below the navigation bar, rather than at the top of the page?

There is a div (#callback) that loads asynchronously via ajax upon submit, for updating or deleting an item. It appears as the green message box at the top of the page. Click here to see image and this is how it looks when "scrolling": Check out the scrol ...

javascriptjqueryhtmlcss

Issue with z-index in Internet Explorer version 7

Currently, I have implemented a drop-down list using jQuery that activates when the user hovers over the main menu. This functionality is working appropriately in all browsers except for IE7 and earlier versions. In an attempt to ensure the drop-down menu ...

htmlcssinternet-explorer-7z-index

Color the text differently if the values are not the same (CSS and jQuery only)

In my code snippet below, you can see a set of HTML elements with specific classes and values: <div class="verizon-data-duplicate-device-key-89148000004605691537 k-content k-state-active" style="float: left; opacity: 1; display: block; ...

htmljquerycss

Use CSS properties to isolate and extract the logo from the Sprite image

If we have a sprite image, like the StackOverflow sprite, and CSS properties like: background-position: 0px 0px; width: 250px; height: 61px; We can use the Chunky PNG library to crop out a specific part of the sprite. However, some websites use negative ...

cssrubybackground-imagechunkypng

Exploring the origins of CSS through patch design

Want to learn how to create a background like this using CSS? Check out this link for inspiration! ...

htmlcss

Customizing CSS for a Single Container

Recently, I've been tweaking the CSS for the selectMenu UI plugin in jQuery. I have a specific file where all my CSS styles are stored. My goal is to include this file on every page request but restrict its application only to my select menus, not ot ...

cssjquery-ui

Problem with jQuery Window Resize Trigger Not Reactivating

I am facing a challenge in integrating a slider within multiple jquery tabs. As the slider requires specific width and height to display correctly, I have to trigger a window resize event when the tabs are switched. Surprisingly, the code I implemented onl ...

javascriptjquerycsstabsslider

Are you looking for methods to alter the elements of a webpage prior to viewing it?

I have created a page with the intention of using it as a tool, but I am facing some challenges due to my limited experience in this field. As a newcomer, I am struggling to achieve certain goals: - My objective is to modify the values of an element on a p ...

javascripthtmlcssdombootstrap-4

Navigation isn't aligning correctly on the right side

I am having trouble with my navigation menu not aligning properly to the right. <div class="logo"> <h2><i class="icon-reorder"></i> Frosty</h2> </div> <div class="nav"> <a href="#">Home</a> </div& ...

htmlcsstwitter-bootstrap

What causes the container's height to remain unchanged despite changes in the height of its image content?

When I set the height of an image to 50%, its container's height remains the same instead of automatically adjusting. HTML: <section class="img-show"> <div class="img-container"> <ul> <li cla ...

htmlcss

Ways to identify when the scroll bar reaches the end of the modal dialog box

I have been working on a modal that should display an alert when the scrollbar reaches the bottom. Despite my efforts to research a solution, I am struggling to detect this specific event within the modal. The desired outcome is for an alert to pop up once ...

javascripthtmljquerycssscrollbar

Wordpress Debacle: Bootstrap Columns Clash

Currently, I am in the process of designing a unique theme. In my code, I have implemented a condition that generates an additional div with the class "row" after every three posts or columns are created. Everything seems to be working smoothly, except f ...

phphtmlcsswordpresstwitter-bootstrap

``There Seems to be an Issue with Loading Content in Tabs

Hey! I'm encountering an issue with my jquery tabs. The first tab content loads fine, but when I select another tab, the content doesn't display. Then, when I try to go back to the first tab, it doesn't load either. Here's the HTML cod ...

javascriptjqueryhtmlcssajax