I try to stream my webcam, i want to get it in full width inside the div.
Somehow it's not working for me. I try to use % to make it responsive possible.
Here is a Fiddle
HTML
<div id="webcam">
<div class="webcam-stream">
<video src="blob:http://localhost/e814ab72-c414-4d97-9eca-b205c914fd6b" controls="" id="ME55u8ZS83mhoMloE2AE5OU9LrkDZdasaEfsKMO"></video>
</div>
</div>
<h3>
END RESULT
</h3>
<img src="https://cdn.pbrd.co/images/HPj7kAyuy.png">
CSS
#webcam {
height: 35%;
width: 40%;
}
.webcam-stream {
width: 100%;
height: 90%;
}
video {
height: 100%;
width: 100%;
}
in any case for responsive it should have bakground, for all screens all devices, or you will have distortion of video in full size mode.
or please read articles, and try to make
https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php
there is few way
1) make fixed container for wrapper, with top,left,bottom,right set to zero, and than for it child add absolute.
2) try with 100vw and 100vh, this can not work in some IE, and older browsers
I am not sure I understand your question 100% but to make it easier for you to see which styles need to change add different background colors to your views.
#webcam {
height: 35%;
width: 40%;
background-color: red;
}
.webcam-stream {
width: 100%;
height: 100%;
background-color: blue;
}
video {
height: 100%;
width: 100%;
background-color: green;
}
In this following example a changed the % values of the child elements to be 10% less to show you what I mean.
Related
I would just like to know how to resize an image width to fit the browser width, The image is basically my header image that i want to fit the screen width.
I would thereafter need to place a div on the image. I have the following at the moment but nothing seems to work.
#container {
position: relative;
}
#divWithin {
position: relative;
top: 20%;
left: 20%;
padding: 5px;
background-color: white;
}
#imgWithin{
width: 100vw;
height: 100vh;
left: 0;
}
<div id="container">
<img id="imgWithin" src="~/images/image(2).png" style="height:325px; margin-top: 75px;" />
<div id="divWithin">Testing</div>
</div>
Any help or ideas would be gladly appreciated
What I am trying to achieve is displayed in an image below:
With 1 being : The image that I want displayed across the screen width (fit screen width)
and with 2 being : The div that I would want to place upon the image
To make a image responsive You need to use a class like this:
.responsive {
width: 100%;
height: auto;
}
If you need more details about responsive images this link should help https://www.w3schools.com/howto/howto_css_image_responsive.asp
Try changing your css to this:
html, body {
width: 100%;
}
#container {
width: 100%;
position: relative;
}
#imgWithin {
width: 100%;
}
#divWithin {
position: absolute;
top: 20%;
left: 20%;
padding: 5px;
background-color: white;
}
This will make the image the full width of the browser window with the text overlaid on top.
You are going to warp the image with a fixed height in your html though. If you provide a link to an image mocking up what you are trying to achieve I might be able to help you further
Why don't you use background: url()?
so new html now is:
<div id="container">
<div id="divWithin">Testing</div>
</div>
and css:
#container {
background: url("Your image url") no-repeat center center;
background-size: cover;
}
learn more about background and background-size
what ever media query you use put every where
CSS:-
.container{
padding: unset;
width:auto;
}
i am expecting inside container id is your image this works perfectly fine in every screen if you face any problem ping me
I have video in my header and I want its height to be 80vh and width of 80% of a total page. Now, the problem is that when if I change the width the height also changes and if I change the height the width also changes.
Below is the image of what I am getting now.
Here is a block that I created, this is how I want my video
Here is my Code :
HTML :
<div id="main-container">
<header>
<video autoplay muted loop id="main-video">
<source src="img/header-video.mp4">
</video>
</header>
CSS :
#main-container {
width: 90%;
margin: 0 auto;
}
#main-video {
width: 100%;
height: 100%;
}
From this code, I am getting this result
This is not duplicate copy and the reason is that my problem is with video, normal div elements work totally fine but with video, it doesn't work. It expands on its width automatically when I expand height and vice versa.
I find a solution to the problem. The only thing I have to do is to add object-fit: fill in case . This will stretch the video as we want.
#main-container {
width: 90%;
margin: 0 auto;
}
#main-video {
object-fit: fill;
width: 80vw;
height: 50vh;
}
How it looks now
just try this css -
#main-container {
width: 80%;
margin: 0 auto; height:80vh;}
#main-video{
object-fit:cover;
width: 100%;
height: 100%;
}
this will not stretch your video and will cover the container.
I'm trying to adjust the height of a picture by a percentage, rather than a pixel. However, when I use height: 30%; it doesn't work, but height: 30px; does work. What am I doing wrong?
My snippet is mind boggingly easy.
.imagebanner {
height: 30%;
width: 100%;
}
<img src="http://localhost/wordpress/wp-content/uploads/2016/11/Welding-banner.jpg" alt="welding-banner" class="imagebanner" />
If you use a percentage value for height, the parent element needs to have a defined height (for example 100%), and this goes up to the body and html, so as a start you can begin with adding
html, body { height: 100%; }
and also give height definitions to all the elements in between body and your image.
Update your browser and then try. Sometimes if you're using old browser. New features of HTML don't work in old browser.
You need to set a 100% height on the parent element.
.imagebanner {
height: 30%;
width: 100%;
background: red;
}
.wrapper {
height: 200px;
width: 200px;
background: grey;
}
<div class="wrapper">
<img src="http://christiancomputerrepair.com/wp-content/themes/christiancomputerrepair/images/home_computer.png" class="imagebanner">
</div>
As the title states, if I wrap <video>'s in a <div> container (to further add an overlay), which is set to relative; inline-block; height:100%; while <video>'s size is height:100%; width:auto It's all nice on initial page rendering, but as soon as you resize the page the videos shrink/grow, but the container's width remains the same.
Here is a codepen for you: http://codepen.io/MaxYari/pen/PqeOQY
Just try to change height of the window and see what I mean.
In another words - I want to make a container that will wrap around the <video> tag, which preserves its aspect ratio by its nature.
This div-video construct must fit into a bigger container-list.
Fit by the bigger side, depending on container-list orientation. i.e height: 100% for horizontal.
Separate CSS surely can be made for different orientations, therefore I just want to solve one case, presuming that it will solve both.
Edit: Updated Pen and added a border to video wrapper to illustrate it's nonwrappiness better.
In Firefox it looks like you could just change display: inline-block; to display: inline-flex; like so:
Example - Does NOT work in Google Chrome; For multibrowser solution with some JavaScript look down below
body,
html {
height: 100%;
}
#videos {
position: relative;
height: 30%;
background-color: rgba(0, 0, 0, 0.8);
}
.video_wrapper {
height: 100%;
display: inline-flex; /* see change here */
}
.video {
height: 100%;
width: auto;
}
<div id="videos">
<div class="video_wrapper">
<video class="video" autoplay src="http://techslides.com/demos/sample-videos/small.mp4"></video>
</div>
<div class="video_wrapper">
<video class="video" autoplay src="http://techslides.com/demos/sample-videos/small.mp4"></video>
</div>
</div>
MDN Documentation
Can I use compatibility table
It looks like the only way to get it to work in Chrome is to force a repaint when the window is resized:
Working Example
$(window).resize(function () {
$('.video_wrapper').hide().show(0);
});
Chrome seems to have issues with fluid video, looks like it has something to do with the object-fit property, fortunately you can work around it with the method above.
You have not specified any width in the video wrapper
.video_wrapper {
height: 100%;
display: inline-block;
}
Add a percentage width like this:
.video_wrapper {
width: 100%;
height: 100%;
display: inline-block;
}
Actually just setting the .video wrapper isn't going to keep in it's container.
you're going to have to set a min-width for the body, html selectors. Use a fluid body width is what's causing to escape it's container.
so the new css would look like
body,html {
height: 100%;
min-width: 1024px;
}
#videos {
position: relative;
height: 30%;
background-color: rgba(0,0,0,0.8);
}
.video_wrapper {
height: 100%;
display: inline-block;
}
.video {
height: 100%;
width: auto;
}
I want my images to resize as the window height changes while keeping the containing div shrink wrapping the image. I tried using:
<div>
<img src="http://akamaicovers.oreilly.com/images/9780596806767/cat.gif" alt="">
</div>
html, body {
height: 100%;
width: 100%;
}
div {
height: 90%;
background-color: black;
display: inline-block;
}
img {
height: 100%;
width: auto;
}
But it doesn't seem to work as expected. The div doesn't shrink. It actually does once I play around with the css properties in debugger.
Here is the fiddle (try resizing the result panel)
Update:
Now this is strange. Since I first posted this question the browser behaviour changed. Originally (Chrome) when I resized the window the image would shrink proportionally as expected but the wrapping div would keep its original width. What happens now (Chrome update?) is that the image doesn't shrink horizontally, and the div also.
I tried it with the latest Safari and Firefox. Both shrink the image but keep original div width. So please be kind to check your solutions on other browsers as well.
Update #2:
The div has to stay of block type as I need to place other elements in the corners of the image.
I guess you'll have to resort to JavaScript:
$(window).on('resize', function (){
$('div').width($('img').width());
});
JSFIDDLE
You just have to keep your image max-height to be 100%. Thats it.
Here is the Working Solution
The HTML:
<div>
<img src="http://akamaicovers.oreilly.com/images/9780596806767/cat.gif" alt="">
</div>
The CSS:
html, body {
height: 100%;
width: 100%;
}
div {
height: 90%;
background-color: black;
display: inline;
}
img {
max-height: 100%;
max-width: 100%;
height: 100%;
}
EDIT
Updated CSS for the img class to make the image fit the full div.
Here is the working solution for the edit.
img {
max-height: 100%;
max-width: 100%;
height: 100%;
display:block;
}
Hope this Helps.
I have had a bit of a go at your fiddle but I don't think browsers will change the width of a div based on the width of the image inside it changing its width, I have tried a few things but couldn't get it to work.
I can however suggest another approach to placing elements in the corners of your auto re-sizing image. Instead of placing these elements inside a div which is also holding the image, you could just float the image and float some div's with a fixed width to the right and the left of the image, and then make those div's cut into the image by setting some negative margins on them.
Here's an example jsFiddle demonstrating this approach. You'll see that the images stay in the corners of the main image when you resize the result window (and thereby changing the size of the main image).
HTML
<div class="right">
<img src="..." />
<img src="..." />
</div>
<img src="http://akamaicovers.oreilly.com/images/9780596806767/cat.gif" alt="" />
<div class="left">
<img src="..." />
<img src="..." />
</div>
CSS
html, body {
height: 100%;
width: 100%;
}
img {
height: 90%;
float: left;
}
div {
float: left;
width: 40px;
position: relative;
z-index: 1;
height: 90%;
}
div.left {
margin-left: -40px;
}
div.right {
margin-right: -40px;
}
div > img {
padding: 3px;
border: 2px dashed blue;
width: 30px;
height: 30px;
}
div > img:last-child {
bottom: 0px;
right: 0px;
position: absolute;
}
you want to give your image width to 100%. Use this.
img {
height: 100%;
width: 100%;
}
When you provide a width and height for the div in %, it resizes according to the page size. And the image size in % is relative to the div width and height. I have kept the div height at 90% of the available space and width at 50%. The image is at 90% both height and width, so that you can see the re-sizing of both image and div sections.
html, body {
height: 100%;
width: 100%;
}
div {
height: 90%;
background-color: black;
width:50%;
}
img {
height: 90%;
width: 90%;
}
You have to update your css written for image purpose
img {
max-height: 100%;
max-width:100%;
}
If I understood correctly, you want to resize image by height but keep proportional size?
If so, use this:
img {
height: 100%;
display: inline-block;
}
You might want to use display: block; as well, depending on your needs.
FIDDLE: http://jsfiddle.net/zhyv9/38/
I have updated the fiddle, with the Img tag self close that may cause error some times..,
and If the image have specified size height and width then it will also resize, and the corresponding div height increases/decrease as 90% when I zoom-in/zoom-out
I hope this is the answer, as I have understood wrapping and re-sizing,
Please reply if not working..
Adding this little hack worked for me. To my understanding it forces the browser to redraw/reflow its contents. Fiddle. I can't figure out why this isn't done automatically by the browser. Tested on Firefox, Chrome and Safari.
window.onresize = function() {
$(".thumb").each(function() {
this.style.display = "none";
this.offsetWidth;
this.style.display= "inline-block";
})
}