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%;
Related
This page centers and shrinks my logo to fit in the browser window. It uses a single PNG file and CSS flexbox with max-width/max-height. (View code)
This page animates the same logo. However, in order to limit the ripple effect to just the blue portion, some changes were needed (view code):
Logo split into two parts and stacked on top of each other (position:absolute).
Hard-coded the size of the logo. (No longer sized based on size of browser window)
I can't figure out two things:
How do I change the hard-coded sizes back to dynamic sizes based on the browser size? I also hard-coded the top and left, but if the two images are centered and scaled by the same ratio, they should line up properly without offsets.
How do I vertically/horizontally center the logo, again? I think my previous flexbox CSS doesn't work because the elements have position:absolute. Update: I was able to get centering to work again, but this involved more hard-coded width/heights.
I think I can do this via JavaScript, but is a pure CSS/HTML solution possible? (I have a feeling centering and dynamically sizing elements with position:absolute might not be possible). If JavaScript is disabled, the solution should gracefully degrade (the two parts of the logo are correctly aligned; the logo fits inside browser window).
Example: https://jsfiddle.net/2rdjfwhb/1/
It is possible to do both with CSS, you just need another wrapper element around the "logo" class. This wrapper element can be positioned naturally inside of a flexbox. After that it's just about calculating the ratio you need for your logo image and the ripple canvas.
.parent {
max-height: 100%;
max-width: 100%;
}
.logo {
width: 100%;
height: 100%;
position: relative; /* Parent handles centering this guy now */
}
.logo-ligature {
width: 100%;
height: 100%;
position: relative; /* Positioned for z-index */
pointer-events: none;
}
.logo-background {
background-image: url(https://cdn.glitch.com/b2cea96d-c2a3-486e-90d5-f60a651a36e3%2Fle_square_light_noborder.png?1553791477453);
background-size: contain;
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
width: 75%;
height: 75%;
position: absolute;
top: 12.5%;
left: 12.5%;
}
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;
}
Could you please tell me why my background image not display completely .It only display upto the contend why ?I have only header in that so it display only small part of background image
Here is my code
.button-bar {
padding:3% 20% 3% 20%;
}
#wrapper{
background-image: url(/login);
}
Actually I got the answer but
when I am trying to give margin to my header tag my background image come down .but my header title remain on same position on top .
see this
.headerTitle{
margin-left:2%;
margin-top:2%;
}
Try with this:
.button-bar {
padding:3% 20% 3% 20%;
}
#wrapper{
background-image: url("http://s.codeproject.com/App_Themes/CodeProject/Img/logo250x135.gif");
min-height: 500px;
}
Because the element with the background is only as high as the elements inside it. So in you wrapper there is only an h4-element with X amount of pixels high, so therefore the wrapper is also X amount of pixels high.
Try adding a min-height to your wrapper and see that the background follows. Like this:
#wrapper{
background-image: url(https://dl.dropboxusercontent.com/s/nz1fzunlqzzz7uo/login_bg.png?dl=0);
min-height: 250px;
}
https://jsfiddle.net/0tnjznt5/
Your css is doing exactly what you are telling it to do....
#wrapper is just that small slither showing with the background. If you want it to take up the entire page use .ionic-scroll in your css instead of #wrapper
See image:
http://screencast.com/t/l1ptRRNaDs
Try replacing #wrapper in your css with .button-bar, then try .ionic-scroll and see the results
.ionic-scroll {
background-image: url(https://dl.dropboxusercontent.com/s/nz1fzunlqzzz7uo/login_bg.png?dl=0);
}
If you want the full image to display inside #wrapper and you know the image height you can set #wrapper height and width like so:
#wrapper{
height: 1000px;
width: 1000px;
background-image: url(https://dl.dropboxusercontent.com/s/nz1fzunlqzzz7uo/login_bg.png?dl=0);
}
If you don't know the height and width of your image I would suggest using an <img> tag inside #wrapper instead... This will cause #wrapper to adjust to the size of the image
I am looking for a way to create a div with height and width of the current browser window size.
This should work even if the window is re-sized.
The fullscreen div shall be followed by even more content.
I am using Bootstrap3 - But I am not sure if this changes anything.
It is pretty easy to get this working in Firefox/Chrome/IE
.fullscreen {
min-height: 100%;
min-height: 100vh;
height: 100%;
width: 100%;
width: 100vw;
height: 100vh;
}
This does not work on Safari.
So I came up with some js
$('.fullscreen').css({
width: $(window).width(),
height: $(window).height()
});
This works on all Browsers (At least all Browsers I've tested). Resizing the window does not work, as the width and height is fix. I could create a Listener that reacts on Window Size changes (I have not looked it up - but this should work).
I don't like the idea of using js to set css.
Isn't there a best practice? This should be possible using css only, shouldn't it? The solutions I've found on the web, were not satisfying.
Something like this?
You need to set the dimensions of both the viewport (html) and content (body) to 100%, then by giving a div a height and width of 100% it will be calculated relative to the viewport, giving the functionality you require (always filling it even on resize).
Feel free to ignore the huge parrot picture in the example, I added it because often in such layouts the first div includes a responsive image.
HTML
<div></div>
<div>More Content</div>
CSS
html, body {
height:100%;
width:100%;
position:relative;
margin:0;
padding:0;
}
div:first-of-type {
height:100%; /* <-- keep the div 100% of the viewport height */
width:100%; /* <-- keep the div 100% of the viewport width */
background-image:url(https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSbcnkIVXLz23PALu8JD-cTGe8KbXKC1JV0gBM_x1lx3JyaNqE7);
background-size:cover;
background-position:center center;
}
div:last-of-type {
background:green;
position:relative;
color:white;
height:100%;
}
EDIT: The answer would allow the background image to change it's height depending on the size of the body. if the body is 500px high, it should be 100% width, 500px height. or 100% width 2500px height.
Maybe I'm missing the boat on this, but I'm trying to figure out how to have my background image scale with the page. The end user doesn't want for the background image to be static (COVER), but the image should scale with the bigger his content gets on his site.
I'm guessing this can't be done with CSS alone. When I say I guess I've been through a mess load of different ways of doing this.
Is this just a simple javascript/jquery where I get the height of the body tag, and then apply that to the background image height?
If you need an example:
<body>
<div class="first"><!--TEXT--></div>
<div class="second"><!--TEXT--></div>
</body>
CSS
body { background: url(http://flashfreezeicecream.com/bg.jpg) center no-repeat; }
div { width: 75%; margin: 0 auto; }
.first { height: 1000px; }
.second { height: 500px; }
http://jsfiddle.net/WEat7/
This would need to work on multiple pages with different body heights
EDIT: http://jsfiddle.net/WEat7/1/
Fixed widths on the divs to illustrate the concept. I apologize
body {
background: url(http://flashfreezeicecream.com/bg.jpg) center no-repeat;
background-size:100% 100%;
}
http://jsfiddle.net/WEat7/
The following CSS should fix the background image and have it cover the entire body no matter what size the width or height - see demo
body {
background: url(http://flashfreezeicecream.com/bg.jpg) no-repeat center center fixed;
background-size:cover;
}
However, please note that IE8 does not support background-size.
Edit: updated demo using following CSS
body {
background: url(http://flashfreezeicecream.com/bg.jpg) no-repeat center center;
background-size:100% 100%;
}
Add to your body css:
background-size:100% 100%;
It seems that we need a wrap answer ))
It has been suggested above that background-size: 100% 100%; will stretch the background image to the full width and the full height. And so it does.
Say your content is small (400px) - the background image will cover only 400 - http://jsfiddle.net/skip405/WEat7/7/
Say your content is really huge (2500px) - the background image will still cover the full height - http://jsfiddle.net/skip405/WEat7/8/