Show SVG in img tag on entire screen

I am facing an issue where my SVG image is not fully visible when displayed within an img tag on the browser's full screen. The bottom part of the image gets truncated, making it inaccessible to users.

Below is the code snippet I have been using:

html,
body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

#svgPhoto {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
}
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
  <img id="svgPhoto" src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/aa.svg">
</body>

View the demo here

htmlcsssvg

Answer №1

To achieve a full-height background image, simply apply the CSS rule height:100vh; to the element with the ID of #svgPhoto. 

    html,
body {
    margin: 0;
    padding: 0;
    overflow: hidden;
}

#svgPhoto {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100vh;
}
<img id="svgPhoto" src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/aa.svg">

Answer №2

If you want to ensure that an element does not exceed a certain height, you can use the CSS rule max-height: 100%;. To see this in action, try running the code snippet below.

html,
body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

#svgPhoto {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  max-height: 100%;
}
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
  <img id="svgPhoto" src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/aa.svg">
</body>

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

How to adjust the font size and font style for the [pageSizeOption] in mat-paginator

I am having trouble adjusting the font-size of the [pageSizeOptions] in my mat-paginator element in the application. <mat-paginator [pageSizeOptions]="[10, 20, 30]"></mat-paginator> The "10" appears too small compared to the text "items per p ...

htmlcssangularangular-materialpaginator

Using Ajax in a separate JavaScript file

How can I retrieve data from an Ajax call made from a different .js file? Here is the code snippet I have been working with: function ajax(url, success, error) { success += "(data)"; error += "(xhr, ajaxOptions, thrownError)"; console.log("St ...

ajaxhtmljquery-mobile

Save React code as a single HTML file

My current project involves creating one-page websites for a specific service that only accepts single inline HTML files. To make these webpages as modular as possible, I am utilizing React to create ready components. The challenge is exporting the final R ...

javascripthtmlreactjswebpacknext.js

Accessing the facebox feature within a dropdown menu

Looking for assistance in creating a function to open a facebox when an option from a drop down list is selected. Here is what I have so far: <select><option value="www.google.com/" id="xxx"></option></select> In the header sectio ...

javascriptjqueryhtmlfacebox

Outline along a single edge

Is there a way to add an inset border to an HTML element on just one side, without using an image as a background? I've been stretching and positioning images for this purpose in the past, but I recently discovered the outline CSS property. However, i ...

htmlcss

Align the text to the center within the Paper component using React and Material-ui

I've been struggling to center text inside a paper component in Material UI, and nothing seems to be working. I attempted using display:flex in the parent component with align-items:center in the child component. I also tried adding padding:5px for eq ...

cssreactjsmaterial-ui

Some PDF files appear as blank when shown using a Base64 encoded string

I am attempting to display a PDF file on a web page using its base64 encoding. Below is the ReactJS code I am using: <object style={{ width: '100%', height:'842pt' }} type="application/pdf" data={`data:application/pdf;base ...

javascripthtmlreactjsgoogle-chromepdf

Changing the appearance of a radio button dynamically upon clicking

I am currently working on a dynamic pickup date form that utilizes radio buttons. My goal is to change the style of the selected value when a user clicks on it. Below is the code I have tried, but it has not been successful: foreach ($period as $day){ ech ...

jquerycssformsradio-button

Ways to horizontally align CSS boxes in Internet Explorer

I am facing a challenge in aligning three CSS boxes horizontally on my webpage. I attempted to achieve this by using the webkit and mozilla box orient and align properties. -webkit-box-orient:horizontal; -webkit-box-pack:center; -webkit-box-align:center; ...

htmlcss

Having difficulty with the rendering of a backbone.js collection view. Encountering an issue where I am receiving an error message: "Uncaught TypeError: Cannot call method 'on' of undefined" within my

I'm currently learning backbone.js and I can't seem to figure out why my view is showing up as undefined on line 67 of coupons.js. I've included a gist since the files are quite lengthy. Another issue I'm facing is that if I refresh th ...

javascripthtmljsonbackbone.js

Infinite scrolling with a dynamic background

Hi there, I am working on my website and trying to create a smooth transition between sections similar to the one demonstrated here:. The challenge I'm facing is that the backgrounds of my sections cannot be fixed; they need to have background-attachm ...

javascriptjqueryhtmlcssparallax

Template Function Problem Detected in AngularJS Formatting

I'm struggling to incorporate my scope attributes into a template function within my custom directive. The formatting for the return section in my template is not working as expected. This is how it currently looks: angular .module(' ...

htmlangularjs

Is there a way to apply a css class to all nested elements in Angular 6 using Ngx Bootstrap?

I've defined a CSS class as follows: .panel-mobile-navs > ul > li { width:100% } Within the HTML, I am utilizing Ngx-bootstrap for a series of tabs like this: <tabset class="panel-mobile-navs" > ... </tabset> My intention is to ...

htmlcssangularangular6ngx-bootstrap

The CSS property col visibility:collapse is ineffective on the Chrome browser

I am attempting to conceal some columns in my HTML code by using MDN colgroup and col elements, and manipulating the styles of the columns. The <td> containing the text 'visible' is visible in all browsers (which is good), but the one with ...

cssgoogle-chromehtml-tablecolgroup

Is there a way to position headline text behind another headline? Take a look at the image provided for reference

I need help creating headline text with a background image similar to the example below. I tried using relative positioning on the first heading, but I can't seem to get it to work correctly. If anyone can provide me with the code to achieve this ef ...

htmlcss

Is it possible to retrieve the pixel color of a mesh by clicking on it in JavaScript?

On the current page, we have a mesh loaded with TreeJS and displayed in a canvas: https://i.sstatic.net/j8Ztj.png Is there a way to retrieve the color of the point where a click occurs? I attempted a method suggested in this thread: Getting the color val ...

javascripthtmlcanvasthree.js

Retrieving Table Cell Values Using Jquery: A Step-by-Step Guide

<table class="table" align="center" id="tblMain"> <tr> <td>Status</td> <td><b><span name="current" value="Dispatch">Dispatch</span></b></td> </tr> </table> JS $(&apos ...

jqueryhtml

Limit access to a page only to designated users

Having a challenge creating a secure page for band members to access their individual band pages. In the band table, each band has four columns labeled $bandm1, $bandm2, $bandm3, and $bandm4. I attempted to create a script that extracted the session user ...

phphtmlmysqlrestricted-profiles

The vertical writing mode is causing boxes to stack in an unexpected direction

I am encountering an issue with three div elements that have a writing-mode of vertical-rl. Despite setting the writing mode to vertical, the block stacking context is not being displayed from left to right as expected, but rather stacking inline. CSS .v ...

csstextlayout

The parameter necessary for [Route: admin.request.update] is missing. The required URI is admin/request/{request}, and the missing parameter is 'request'

When attempting to access detail.blade.php, I encountered an error stating "Missing required parameter for [Route: admin.request.update] [URI: admin/request/{request}] [Missing parameter: request]." Despite following the steps and codes exactly as in my pr ...

phphtmlcsslaravel