I want to create a page contains only one svg element that fit width and height and has maximum possible scale.
Related questions
How can I make an svg scale with its parent container?
How to resize an image to fit in the browser window?
didn't work, but combination of proposed methods solved the problem.
1) replace width="A" height="B" in opening <svg ...> tag to viewBox="0 0 A B" max-width="100%" width="auto" max-height="100vh" height="auto".
Now it nearly works But not very accurate because browser automatically adds margin: 8 to body's style (even if there is not <body> tag in .html file). So
2) add <style> body { margin: 0 } </style>
This might help. I used this CSS to fit a background image to width and height and it scales down accordingly to the browser.
html {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: relative;
}
You can set your SVG in a DIV and add a class to it, then you simply use the above CSS to scale the DIV's content.
put your image in a div, and apply these css rules:
div{
height:100vw;
height:100vh;
}
svg{
height:100%;
width:100%
}
Here is the solution for you guys. Check the link here
html,
body {
margin: 0;
padding: 0;
overflow: hidden;
box-sizing: border-box;
}
.svg-cont {
width: 100vh;
height: 100vh;
display: flex;
justify-content: center;
margin: auto;
}
.svg-cont > svg {
width: 100%;
height: 100%;
}
Related
I have 11_100px(height) x 3_840px(width) image that I want to fit on my website, I managed to somehow fit it for desktop size using the padding-top trick calc(height / width * 100%) to calculate aspect ratio). But when resizing viewport it becomes impossible to maintain for tablet and mobile.
Somehow I need to make the height fully reliable to the width size
I wasn't able to find any stack overflow sufficient answer, how are such large backgrounds handled for all devices?
Example: link to my example
The best way to achieve this is by adding a background image to a div.
body {
margin: 0;
}
div {
width: 100vw;
height: 100vh;
background-image: url("https://via.placeholder.com/500x500.png?text=Placeholder");
background-size: cover;
background-position: center;
}
<div></div>
You can define a background-image for bodyto which you apply the below settings (except using your own image of course).
The background image will not scroll with the content in this case - I suppose this is what you want.
body {
margin: 0;
background-image: url("https://picsum.photos/1200/1600");
background-size: cover;
background-position: center;
background-attachment: fixed;
}
You can also do this to scale the image to fit the width of the screen and if the width is too long it will be hidden.
body {
background: url("https://picsum.photos/1200/1600");
background-size: cover;
object-fit: cover;
width: 100vw;
z-index: -1;
overflow-x: hidden;
}
nav {
height: 10vh;
width: 100vw;
}
footer {
height: 10vh;
width: 100vw;
}
<html>
<head>
</head>
<body>
</body>
</html>
I'm making a website and the website is basically just a huge image except for the clickable elements and I was wondering how I could make the image size increase according to the the user's screen size so that the image doesn't look stretched, but still fits the whole screen. This is my first time working with viewport, so I can't exactly say I understand it very well. Here's some code to help out:
<div class="Image">
<img src="Background.png"/>
</div>
.Image {
width: 100vw;
height: 100vh;
object-fit: contain;
}
The first part was written in index.html while the second was written in style.css. Just for your info, the html part was written in <body>.
You have to apply
width: 100vw;
height: 100vh;
object-fit: contain;
To img directly , you can use id class or img directly but last method is not recommended as it will apply to all img tags in the document
I have used red background to show how much area image covers but as object-fit: contain; so image ratio's are maintained
Read this to know more about object-fit
Use
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
To remove any unnecessary horizontal scroll bars as tags have some default margin and padding . So , here used the body tag
.Image {
width: 100vw;
height: 100vh;
object-fit: contain;/*Can be cover , fill , none...*/
background-color: red;
}
body {
box-sizing: border-box;
margin: 0;
padding: 0;
}
<div>
<img src="https://www.hdnicewallpapers.com/Walls/Big/Rainbow/Rainbow_on_Mountain_HD_Image.jpg" class="Image" />
</div>
<div class="fullscreen" />
.fullscreen {
position: fixed;
top: 0;
left: 0;
background-image: url(Background.png);
background-size: cover;
background-position: center;
width: 100vw;
height: 100vh;
}
I need some help regarding CSS, I've been trying for hours to make a background be fullscreen.
This is my CSS:
.mainContainer{
width: 70%;
display: table;
margin: 0 auto;
padding-top: 100px;
}
html{
height: 100%;
margin: 0;
border: 0;
padding: 0;
background-image: url(../assets/background.jpg);
background-position: center center;
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
}
And this is my html:
<html>
<div class ="mainContainer">
<app-header></app-header>
<router-outlet></router-outlet>
</div>
</html>
This semi-works the problem is the background stops as soon as my content stops, it does not continue until the end of the browser window.
Example:
I'm trying to make the background go way down there and dynamically resize with my browser.
Your HTML code is missing the body tag. Add that, and also add body { min-height: 100%; } to your CSS - this will also stretch the body height to at least the window's height.
In CSS, 100% is broken when it comes to vertical things. Try 100vh, which is the percentage of the viewing height. Also, 100vw is 100% of the viewing width. There are also vmin and vmax. Hope this helps!!!
A few things:
Like another person said, use a <body> tag.
Add a width of 100%
in background-image rule, you should have single quotes around the URL, so it looks like: background-image: url('../assets/background.jpg');
Lastly, you should be using a DOCTYPE. https://en.wikipedia.org/wiki/Document_type_declaration
.mainContainer{
width: 70%;
display: table;
margin: 0 auto;
padding-top: 100px;
}
body{
height: 100%;
width: 100%;
margin: 0;
border: 0;
padding: 0;
background-image: url('https://images.pexels.com/photos/259915/pexels-photo-259915.jpeg?auto=compress&cs=tinysrgb&h=650&w=940');
background-position: center center;
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
}
<!DOCTYPE html>
<html>
<body>
<div class ="mainContainer">
</div>
</body>
</html>
Also...in the Stack Overflow code embed, I don't think you can use custom elements.
Thanks everyone for the help, the issue was from angular material style that was overriding my background-image tag and adding borders to it for some reason.
I fixed it by adding ::ng-deep in front of html css, like this:
::ng-deep html{
background-image: url('../assets/background.jpg');
background-position: center center !important;
background-attachment: fixed !important;
background-repeat: no-repeat !important;
background-size: cover !important;
}
Also the issue with the background not going full screen was because I was missing the body tag and body { min-height: 100%; }
I have this code:
.main {
min-height:100%;
width:100%;
position: relative;
background-image: url('onepage_restaurant.jpg');
background-repeat: no-repeat;
background-size: cover;
display: block;
}
but the div of class .main isn't showing up. Why?
Your code works fine unless you make sure that your parent element has a height greater than zero - otherwise your .main element will have no height either.
Also make sure that the file path to your image is correct. You can use the developer tools of your browser to check the height of your container and the image url.
html, body {
width: 100%;
height: 100%;
}
.main {
min-height: 100%;
width: 100%;
position: relative;
background-image: url(//placehold.it/500);
background-repeat: no-repeat;
background-size: cover;
display: block;
}
<div class="main"></div>
You want to set the min-height of that element to 100%. When you want to set the height of an element with percentage you need to set the height of the parent element to a specific value.
Set the height in pixels. Example.
height: 100px;
Could be either background image wrong path or, if you have no content, html, body height set to zero.
try this in your css
html, body {
width:100%;
height:100%;
margin:0;
padding:0;
}
I have made a page that starts with a full (100% by 100%) image div.
This div will always fill up the page before scrolling.
Then I have another div with an image.
On desktop there is no problem.
However, on mobile when this page is loaded and I swipe my finger to give it a little scroll, then when the phone finished scrolling, it snaps / auto scrolls back a bit. It also appears to zoom-in a little.
I think it's due to the 100% on HTML and BODY tag, because if I remove that, then there is no scrolling correction.
I have tried this on several Android phones and always the same. How do I fix this? Here's the code.
<style>
* {
box-sizing: border-box;
margin: 0;
}
html, body {
height: 100%;
}
div {
width: 100%;
height: 100%;
}
div.first {
background-image: url("http://i.imgur.com/VWYl1EC.jpg");
background-attachment: fixed;
background-size: cover;
}
div.second {
background-image: url("http://i.imgur.com/PbV1Grl.jpg");
background-size: cover;
}
</style>
<div class="first"></div>
<div class="second"></div>
Problem is when the first div on a page has a height in %, this auto correction scroll will happen on Android phones.
The solution is to set the height in PX instead by using jQuery.
For example:
$('.firstdiv').css('height', $(window).height() + 'px');
use your css like following:-
<style>
* {
box-sizing: border-box;
margin: 0;
}
html, body {
height: 100%;
}
div.first {
max-width:100%;
background-image: url("http://i.imgur.com/VWYl1EC.jpg");
background-size: cover;
height:300px; /* as you needed */
}
div.second {
max-width:100%;
background-image: url("http://i.imgur.com/PbV1Grl.jpg");
background-size: cover;
height:300px; /* as you needed */
}