I'm trying to make an <object> full screen, with the object-fit: cover; property, but unfortunately in Chrome the result is contain, instead of cover. In Firefox I get the result what I'm looking for. I tried it with <img> tag, and it works, but I can't use an animated svg without <object>.
body {
padding: 0;
margin: 0;
}
.container {
height: calc(80vh - 100px);
position: relative;
overflow: hidden;
}
object {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
<div class="container">
<object type="image/svg+xml" data="https://svgur.com/i/asr.svg" />
</div>
How can I get the same result in Chrome?
Related
How can i fit this video on the whole screen?
I have used the below code
<style>
*{
margin: 0px;
padding: 0px;
}
#sky-video{
position: fixed;
width: 100%;
height: 100%;
z-index: -100;
}
</style>
<body>
<video src="videos/Sky.mp4" autoplay muted loop id="sky-video">You brower does not support vidoes</video>
</body>
Here you can see there is a gap in right and left of the video.
Is this because the video size is too small to fit in the whole screen?
You may also want to add: object-fit
#sky-video {
position: fixed;
width: 100%;
height: 100%;
z-index: -100;
object-fit: cover;
}
You need to set the width and height for the video container first.
Your container now is then:
body {
display: block;
width: 100%;
height: 100vh;
position: relative;
}
body #sky-video {
width: 100%;
height: auto;
object-fit: cover;
}
I have a full width banner and Im using this style :
.headline--hero {
width: 100%;
min-width: 100%;
padding: 0;
height: 490px;
}
#media (max-width: 1024px) {
.headline--hero {
height: 46vw;
}
}
.headline--hero>h2 {
width: 100%;
height: 100%;
}
.headline--hero>h2>img {
width: 100%;
height: 100%;
object-fit: cover;
}
This works just fine with Chrome. When I zoome out using CTRL+- the full width banner adjust fine.
In IE however it broken looks like the style object-fit: cover; is not working. I tried using
.headline--hero>h2 {
width: 100%;
height: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.headline--hero>h2>img {
height: auto;
width: 100%;
}
The width of the banner is working fine it gets all 100% but the height is the problem, my guess is since there is a position absolute the image is not moving height so the image is not getting the complete height.
Is there a way to replicate the style object-fit: cover; in IE other the one I tried?
Unfortunately object-fit is not supported in IE
Here is the article I've found - https://css-tricks.com/almanac/properties/o/object-fit/
You can try background-size: cover;
As a guy in comments mentioned before
I'm using the following code to show a background image on my page:
#bg-pic {
top: 0px;
left: 0px;
position: fixed;
z-index: -1;
margin: 0px;
width: 100%;
}
#bg-pic > img {
width: 100%;
display: block;
}
<div id="bg-pic">
<img src="https://images.pexels.com/photos/259915/pexels-photo-259915.jpeg" />
</div>
This works fine once the ratio of the browser window is wide enough. But in case I have a very small window I want the picture still to cover the page so instead of width: 100%; height: 100%; would be correct. How can I fix this?
EDIT: Since the provided answer don't solve my actual problem let's describe it using an example:
Let's assume my picture has dimensions 100x100 and my browser window has dimensions 200x100. Then only the upper 100 pixels are filled with the picture. What I want is that the whole browser window is filled by zooming into the picture (of course then the area on the right and on the left of the picture which corresponds to the right 25 and left 25 pixels of the picture is omitted).
Use the background property instead of an img element.
Demo:
body {
background: url('image.jpg') center center / cover;
}
jsfiddle
In your case:
html, body {
min-height: 100%;
}
body {
margin: 0;
background: url('bg.jpg') center center / cover;
}
You could use the object-fit and object-position properties on the image tag.
Codepen example
#bg-pic{
top:0px;
left:0px;
position: fixed;
opacity: 0.18;
z-index: -1;
margin: 0px;
width: 100%;
height:100%;
}
#bg-pic img {
object-fit: cover;
object-position: 50% 50%;
width: 100%;
height: 100%;
}
You can read more about object-fit at CSS-Tricks : https://css-tricks.com/on-object-fit-and-object-position/
You just have to add height:100vh; in your img style tag,
You can't use height:100% because it won't be applied unless you have specified static height to parent div.
Always a better option to go for vh dimension.
#bg-pic {
top: 0px;
left: 0px;
position: fixed;
z-index: -1;
margin: 0px;
width: 100%;
}
<div id="bg-pic">
<img src="https://images.pexels.com/photos/259915/pexels-photo-259915.jpeg" style="width:100%; height:100vh; display: block;"/>
</div>
body { background-image:url("../images/bg.jpg");
background-repeat: no-repeat;
background-size: 100% 100%; }
Try this
You can try flexbox like this:
#bg-pic {
top: 0;
left: 0;
position: fixed;
opacity: 0.5;
z-index: -1;
width: 100%;
height: 100%;
display: flex;
align-items: flex-start;
justify-content: center;
}
img {
min-width: 100%;
min-height: 100%;
flex-shrink: 0;
}
<div id="bg-pic"><img src="https://picsum.photos/800/800?image=1069" style="" /></div>
Try this, its cross browser compatible:
div {
position:relative;
}
img {
max-height: 100%;
max-width: 100%;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
This assumes you have given a size to the div.
You might be looking for background-size: contain. Paired with height: 100vh should give you desired effect.
If you need the image centered horizontally you can add background-position: 50% 0% or background-position: center; for both horizontal and vertical centering.
#container-with-background {
background: url(https://images.pexels.com/photos/259915/pexels-photo-259915.jpeg);
background-repeat: no-repeat;
background-size: contain;
height: 100vh;
}
<div id="container-with-background">
</div>
If you need your images to be inside your <img> tags you can achieve the same effect with max-width: 100% and max-height: 100% on the <img> tag, and fixed height on the container - height: 500px for example. Setting the height to 100vh will make it fullscreen.
#container {
height: 100vh; /* Can be set to fixed value if needed */
}
img {
display: block;
margin: 0 auto;
max-width: 100%;
max-height: 100%;
}
<div id="container">
<img src="https://images.pexels.com/photos/259915/pexels-photo-259915.jpeg">
</div>
I want a particular picture to cover the entire background of my site and when the window is resized, I want the picture to be scaled accordingly. What I'm looking for is something like https://www.tumblr.com. Notice the picture in the background scales accordingly to the window size.
Here is my css:
html, body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
#backdrop {
z-index: -999;
min-height: 100%;
min-width: 100%;
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
}
Where #backdrop is the id for the image I'm using.
I've tried numerous things but nothing seems to change the way my image is displayed.
Use object-fit to let an img behave like a background-image. See this working example:
html, body {
height:100%;
margin:0;
padding:0;
}
img {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
<img src="http://lorempixel.com/g/1100/300">
Two things:
Change the height: auto; to height: 100%, and add background styles.
#backdrop {
z-index: -999;
min-height: 100%;
min-width: 100%;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background: url("image.jpg") center center no-repeat;
background-size: cover;
}
Also, use a HTML 5 Doctype:
<!DOCTYPE html>
<div id="subpageMain">
<div id="subpageHeaderImageSection">
<div id="subpageHeaderLeft">
</div>
</div>
</div>
#subpageHeaderImageSection {
position: relative;
top: 0;
left: 0;
width: 100%;
height: 400px;
}
#subpageHeaderLeft {
position: absolute;
left: 0;
top: 0;
float: left;
width: 100%;
height: 100%;
background: url('../theImages/subpageHeaderImage.png') no-repeat;
background-size: 100% 100%;
}
#subpageMain {
position: relative;
margin-left: 295px;
margin-right: 10px;
padding-bottom: 43px;
top: 50px;
}
This is what I see:
Why does IE8 take the background image and stretch it too much that the right content doesn't show and goes out of the screen?
How do I fix it?
IE8 does not support the CSS background-size attribute (see the compatibility table at MDN). To support IE8, you'll need to use an <img> element instead and set max-width: 100%; max-height: 100%;.
IE8 can't stretch the background out of the div. However, it looks like the div with id #subpageHeaderLeft is stretched to the right due to the fact that it has width:100%