I am working with videojs and set fluid:true
It covers the full width, which is exactly what I wanted.
Now the issue is it changes height of player, and it is different for different videos. I want it to be maximum 500px.
Here you can check it live what I have done.
I had a similar problem. Our video was already pretty customized, so these rules may not be enough for you, but here's what I did. It's super hacky, due to needing to override CSS:
/* Make the video relative, instead of absolute, so that
the parent container will size based on the video. Also,
note the max-height rule. Note the line-height 0 is to prevent
a small artifact on the bottom of the video.
*/
.video-js.vjs-fluid,
.video-js.vjs-16-9,
.video-js.vjs-4-3,
video.video-js,
video.vjs-tech {
max-height: calc(100vh - 64px);
position: relative !important;
width: 100%;
height: auto !important;
max-width: 100% !important;
padding-top: 0 !important;
line-height: 0;
}
/* Fix the control bar due to us resetting the line-height on the video-js */
.vjs-control-bar {
line-height: 1;
}
Related
I'm using an image with a height of 5000px, and i want make it always appear 100% in width and height to cover the background, in mobile and desktop.
.main {
position: relative;
background: url('../images/background.png') no-repeat top center;
background-size: cover;
width: 100%;
}
This code does not work, it makes her not to appear. I always need to set a height, and the problem is that the mobile's height is different from the desktop.
So you could say.. 'you can set height: 100%'.. and I did .. but nothing happens, the image doesn't appear, only if i set with pxs.
UPDATE
I feel urged to update my answer since I apparently understood the question the wrong way. I'll leave the old version at the bottom since apparently a lot of people found it helpful even though it failed to answer the original question.
Since your background image is repeating itself, I'll assume you don't want the whole image, just whatever height you need. So, you need 2 things:
set a height on .main
get rid of background-size altogether
So, this should actually work for you:
.main {
position: relative;
background: url('../images/background.png') no-repeat top center;
width: 100%;
height: 100%;
}
If my assumption is correct, there's 1 more thing: you don't need a background over 5000px high to achieve your goal, just reduce it to 1px height (i.e. 1 line of your desired background) and change your css to:
.main {
position: relative;
background: url('../images/background.png') repeat-y top center;
background-size: cover;
width: 100%;
}
I hope this helps
OLD VERSION
Your .main has no height and height:100%; doesn't work because the elements containing it have no height themselves.
One possible solution would be to add this:
html, body, .main {
height:100%;
}
This might be exactly what you need, but you may also run into other problems with this solution. It all depends on what you're actually trying to achieve.
Other possible solutions:
Use viewport units
.main {
height:100vh;
}
Please be aware that some mobile devices interpret these differently from what you'd expect.
Add the background to the body itself
body {
background: url('../images/background.png') no-repeat top center;
background-size: cover;
}
As I wrote before: It's difficult to tell which solution is the best, it depends on your goal.
Have you tried adding this style?
html, body{ height: 100%;}
Then adding a height:100%; to your .main div
You are working with background-image... Keep in mind that the size of the rendered image has nothing to do with the image it self, but with the element created to contain it.
Now, if you want your image to appear at 100% height and width you can use the property background-size: contain, instead of cover.
This will tell the browser that your image should not be cropped (as long as you have a height set for the .main element).
It seems to me, that the kind of effect you want is easier done if you just use the <img> tag instead of css background.
I had a issue about flex box can`t fit the background height, and the code below suited for me. The rest background-size,repeat and position depends on yours.
html{
height:auto;
}
body{
display: flex;
flex-direction: column;
min-height: 100vh;
}
I have implemented AddThis plugin in my website, however, when I resize the browser's width and before it hits the #meduim screen style the more layer get displayed in a wrong floating position.
I snapped this css from their out of the box implementation
element.style
{
z-index: 1000000;
position: absolute;
visibility: visible;
top: 681px;
left: 753px;
display: none;
}
#at15s.atm
{
background: none!important;
padding: 0!important;
width: 160px!important;
}
I do reference this js file provided by them, and it takes care of the css I guess. What css should I share with you guys to get familiar with this problem so you may give me suggestions for the floating problem?
I just had the same problem and i added this little css to my page and now the more-layer opens up to the left instead to the right.
You should then try to reset these style´s in your media queries for smaller screens.
#at15s.atm {
left:auto !important;
right:0 !important;
}
I've created a web application where you can draw an image. When you print the the website, there should only be the image, and it should use as much space as possible on one page.
My problem: if the image is much higher than wide, it still uses the full width and the lower edge is cut off or is on a second page! Firefox also cuts off about 2% of the image at the right edge. How can I solve this problem using css? Or is this only possible with JavaScript?
#media print {
#content {
display:none;
}
#canvas {
position:absolute;
max-width:100%;
max-height:100%;
margin:0px;
}
}
Here's my JSFiddle: http://jsfiddle.net/Gh28n/6/
The trick is to set a fixed with so large it can fit any paper, and set the max-width to 100% so it will always be scaled down, and height to auto to maintain the aspect ratio, like so:
#canvas {
width: 9999em;
max-width: 100%;
max-height: 100%;
height: auto;
}
As for the clipping on the edge, removing the position: absolute fixed it.
edit: added max-height: 100%;
I know how to ensure that the HTML body vertically stretches/shrinks to 100% height of the browser viewport (by having 100% height in the body and html rules).
I also know that normal HTML flow will result in containers vertically stretching to contain their contents (if things are set up properly).
Yet, I cannot seem to achieve both.
I.e. I cannot beat CSS into ensuring that when my page is viewed on a high resolution screen that it vertically stretches to leave no gaps AND to ensure that if my page is viewed on a lower resolution screen that the body stretches past the viewport (to accommodate all the content) and introduces scrollbars.
To me that is ideal behaviour and yet I sadly believe that this cannot be achieved purely in CSS. I know I can do this in JavaScript quite easily, but I want to be able to do it just in CSS.
Is it possible, or am I forced to use JavaScript?
Edit:
I have researched, tried and test so many techniques, but it just seems like it can't be done. Looks like I am going to have to go back to JavaScript.
OK so this definitely works for me:
html {
height: 100%;
}
body {
min-height: 100%;
display: flex;
}
#wrapper {
width: 100%; /* Necessary because of side-effect of flex */
height: 100%;
}
Exactly what I tried before, but I thought I would give this new CSS feature "flex" a go and it has done the trick. So it looks the CSS managers/creators have finally addressed these critical issues with dynamic height and vertical centring.
I hope this helps someone else stuck on this issue.
You can use the min-height css property.
html, body {
min-height: 100%;
}
min-height: 100%; /* other browsers */
height: auto !important; /* other browsers */
height: 100%; /* IE6: treated as min-height*/
Taking inspiration from a question which seems to be pretty much the same as mine: Make body have 100% of the browser height
This is working for me:
html {
height: 100%;
}
body {
min-height: 100%;
}
Now the title of the question may have been worded the wrong way.
I want the image to take up 100% of the width or heigh (I guess whichever is larger). Kind of like when you have a photoviewer and there make be a black border on the sides or the top, depending which way it is.
Obviously if it's a very small image I don't want it to stretch, I never want any of the images to stretch, I just want them to fill as much of the window out as they can.
For example, when you load an image on Google, it doesn't show it's fullest resolution. It shrinks it down to fit within the borders of the page if it is to big. Then you can click on it to zoom in if you want.
How would I accomplish this? Thanks.
I think you would actually need the following:
.container img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
}
This requires a container with an explicit height set to work.
Example:
http://jsfiddle.net/AtxYb/4/
This is pretty easy to accomplish with CSS alone:
.container img {
max-width: 100%;
height: auto;
}
The max-width ensures that it never exceeds 100% of the width of its container. height tells the browser to size the image normally (eg. it's not going to stretch it width-wise, but not height-wise) and is included for older browsers.
You can of course also reverse this if you wish to match a container's height instead of width.
edit:
As pburgess suggests, if you wish your image to match either width or height, you need to declare both. See this jsfiddle: http://jsfiddle.net/XxgkG/
.container img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
}
Note this will not work in IE6 and is shaky in IE7. If you're coding for these sad, lonely browsers you should check out this answer.
Demo Fiddle
img{height:auto;width:100%;}
Try re-sizing the window - The image will take up the maximum space .