Automatically resizing images when the browser width/height changes - javascript

I have a page with many images in divs and the layout looks good only in full size, when the browser window is smaller it's really messy. I found a similar question on stack overflow but their answers don't work for my case.
EDIT: I did everything what you guys advised but it still doesn't work.
<!DOCTYPE html>
<html>
<body background="">
<head>
<style>
div.asciigun {
top: 30%;
left: 50%;
position: absolute;
max-width: 100%;
}
</style>
</head>
<body>
<div class="asciigun">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTU7ROirglSjKnpsLvt29uCDlVtpZutirtiXyg3FF0UtXFf0TnE" height="90%" width="90%" >
</div>
</body>
</html>

Let's try another approach. Try not to modify max-width or max-height. Just leave it as it is (or set width: 100% and height: 100%).
And then change <img src="url.jpg"> to background: url("url.jpg"); and then just do
.image {
background-size: cover;
}
or
.image {
background-size: contain;
}

Ok I figured it out! I needed viewport value instead of %. Now images go proportionally with browser size and stay in place.
div.asciigun {
position: absolute;
top: 30vw;
left: 74vw;
z-index: 1;
width: 30vw;
height: 15vw;
}

Related

CSS positioning/resizing html5 video background

Hey all you wizards of the interwebs,
I've been pulling my hair out for the past couple of days trying to figure this one out.
I'm trying to include a fullscreen video background and it seems I have hit a snag.
Below is an image of what I am trying to accomplish.
I tried it with the video element as well as an iframe. I can't get the div below to always nest under, when the browser window is resized.
Any help or pointers are greatly appreciated. Closest I've gotten was with a min-width/height but it still leaves a gap...
What I end up with is what shws in the 2nd img. The video resizes with the browser and there's a gap below it
To prevent the problem you need to do this:
css:
.div1{ background-color: red; height: 100%; position: relative; overflow: hidden;}
.div2{ background-color: black; height: 100%;}
video{ position: absolute; height: 100%; width: 100%; margin: 0; padding: 0; top: 0; bottom:0; right: 0; left: 0;}
and put your video inside div1:
<div class="div1">
<video autoplay>...</video>
</div>
<div class="div2">
</div>
It don't allow video element to show at overflow. and div1 is always height:100% and div2 is always height:100%.
If you like to fit the video to the div1 add
object-fit: cover;
to the video tag.
IE Doesn't Support object-fit
I'm not sure if this will work but
Have you tried removing width: 100% and only keeping height: 100% ?
I might be able to give better suggestions, if you can show the code :p
EDIT:
Since you want height to be screen height and width can be more or less, I'd say, try
min-height: 100%;
width: auto;
height: auto;
This should do the trick
NEW EDIT:
body{
overflow:hidden;
}
#wrapper {
width: 100%;
height: 100%;
}
.videoInsert {
min-height: 100%;
min-width: 100%;
height: auto;
width: auto;
position: absolute;
left: 0%;
top: 0%;
}
video{
display: inline-block;
vertical-align: baseline;
object-fit: fill;
}

JQuery background video does not cover whole the page

I am using Vide to play a video in the background.
Here is the playing div tag.
<div style="width: 1000px; height: 500px;"
data-vide-bg="path/to/video" data-vide-options="loop: false, muted: false, position: 0% 0%">
</div>
when i change the style to
width: 100%; height: 100%;
The video disappears from the page. I want that video covers all page and I can scroll down.
Why does it happen?
How can I fix it?
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Body background example</title>
<style>
html, body {
margin: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body data-vide-bg="video/ocean">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../libs/jquery/dist/jquery.min.js"><\/script>')</script>
<script src="../src/jquery.vide.js"></script>
</body>
</html>
This is fine just put scroll bar or use some jquery for scroll purpose.
if you want to cover all with the div and adjusted depending on the size of the screen, this is the code (Important, this is directive to the div):
style="
position: absolute;
z-index: -1;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
overflow: hidden;
-webkit-background-size: cover;
background-size: cover;
background-image: none;
background-position: 50% 50%;
background-repeat: no-repeat no-repeat;"
if you want in the body, in the folder examples/body-bg.html is the examples for apply to the body only: https://github.com/VodkaBears/Vide/tree/master/examples
You are using the wrong units of measurement. If you pull the image in via CSS image-background then you can set the image-background-size to the contain property. It will insure that the video completely fits into it container (body, div, span, etc.).
body{
background-image:url(''your-video.mp4');
background-repeat:no-repeat;
image-background-size: contain;
}
Source: w3schools CSS3 background-size Property
You could also try using the height and width but use the vh and vw metrics. It sets the height and width based on the view ports dimensions.
Source: CSS Units

Jerky/flickering background image on scroll on Webkit and Edge (jQuery and vanillaJS)

I am using jQuery to make a background image appear fixed (since background-attachment: fixed doesn't play nicely with background-size: cover). In some environments the image doesn't flicker but in others it does, and I can't figure out why. (A related but different question is here, but I'm not using parallax scrolling.)
It doesn't flicker here and on this fiddle:
$(window).scroll(function() {
var scrolledY = $(window).scrollTop();
$('#bg').css('background-position', 'left ' + scrolledY + 'px');
});
body {
height: 3000px;
margin: 0;
}
#bg-wrap {
position: relative;
width: 100%;
}
#bg {
height: 600px;
width: 100%;
position: relative;
background-attachment: scroll;
background-image: url('http://classicescapes.businesscatalyst.com/Images/home-banner/CAPE_RT_desat.jpg');
background-position: left top;
background-repeat: no-repeat;
background-size: cover!important;
}
#bg-text {
position: absolute;
top: 200px;
left: 47%;
font-size: 3rem;
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="bg-wrap">
<div id="bg">
</div>
<div id="bg-text">Hello!</div>
It flickers here when using Webkit and Edge browsers (but doesn't flicker on IE and Firefox).
Over here it flickers until one initializes a Google Map by clicking on the "Region Map" tab.
Any help as to understanding the cause and providing a possible fix would be greatly appreciated.
Try using:
transform-style:flat
on the css rule of the flickering image
or
html{
overflow: hidden;
height: 100%;
}
body{
overflow: auto;
height: 100%;
}
While I still don't know what is causing the issue on the test page, I fixed my original problem by removing a rogue CSS transform!

img height as a percentage of the browser window

i want to make a full-width picture slider with jquery (myself) and i want it to scale well in any size of the browser in a way that its height is smth like 80% of the browser window's height and resizes as the browser do indeed!
this is my html:
<body>
<img class="img_slides" src="../images/1.jpg" alt="1.jpg" width="90%"/>
</body>
but it doesn't work while if i use width insteed of height the exact thing i want happens!
sry if i wrote too much! but otherwise my question wasnt meeting the sites qualities and they couldn't submit it!!
Codepen e.g.
img {
height: 80%;
}
body, html {
height: 100%;
}
You need to have body & html height set to 100% because by default they don't take 100% of the viewport. Without it, setting image's height to 80% won't work.
This should auto-size your image and center it on the page
<div class="wrapper">
<img class="image" src="#">
</div>
<style type="text/css">
.wrapper {width: 100%; height: 100%;}
.image {position:absolute; height: 80%; width:auto; left:0; right:0; top:0; bottom:0; margin:auto}
</style>
// EDIT
<body style="width:100%; height:100; margin:0">
<img class="image" style="position: absolute; height: 80%; width: auto; left: 0; right: 0; top: 0; bottom: 0; margin: auto;" src="url.jpg">
</body>

Center logo in web page (vertically & Horizontally)

I have a logo (775 X 225) that I would like to center (both vertically and horizontally) in a web page and then have a link "Enter", placed underneath it
<html>
<head>
<Title> My website </Title>
<style type="text/css">
//centerlogo CSS class here ?
</style>
</head>
<body lang=EN-US>
<div class'centerlogo"> <span></span>
<img src="images/logo.jpg">
</div>
</body>
</html>
what is the best way to do this so that it is centered both vertically and horizontally and works in all browsers?
Can someone show me the CSS class if its the best method - or javascript code if it is the best method?
I tried looking at a few examples on here, but couldn't get any of them to work with my image.
thanks
Since the logo is a known size, then you can position it absolutely with negative margins equal to half the width and height.
.centerlogo {
position: absolute;
width: 775px;
height: 225px;
top: 50%;
left: 50%;
margin-left: -387px; //Half the width
margin-top: -112px; //Half the height
}
This will remain in the exact center of the screen regardless of the size of the window.
Do something like this on the item you want centered.
Here is an example of the output: http://jsfiddle.net/FjLQY/1/
img{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 128px; /* height of item */
height: 128px; /* width of item */
}

Categories