I am using sketch.js to have a simple sketch board for a mobile app. It is just supposed to fill the full screen through setting width and height to a 100%, but after I click into the "sketch board" it adjusts itself to a smaller size. How do I set the canvas to full screen in this case? This is my example http://jsfiddle.net/66UJ9/
<canvas id='mysketch' style="height:100%; width:100%; border: 1px solid black; "></canvas>
CSS's height attribute will not refer to the height as the percentage of window, which is what you're expecting. The MDN states:
The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to auto
There is no containing block in your Fiddle, and it is not absolutely positioned, therefore it defaults to auto. But you can set the <canvas>'s height to the browser window with JS like so:
// Set the <canvas> height to the window's height
$('canvas').css('height', $(window).height());
You may need to adjust this a little depending on how your real page looks. (JSFiddle is adding some padding which throws it off.)
Related
If body is smaller than viewport, then the viewport size is returned.
What I am trying to do is resize a picture so that the body fits inside the viewport. I want to have one of those nice "above the fold" layouts where the user does not need to scroll. It breaks though when the screen is so large that the body is smaller than the viewport.
If body < viewport
then
document.body.scrollHeight (body) = document.documentElement.clientHeight (viewport)
The jQuery solution is to use $(document).height(), but it gives the larger of the viewport or the document.
How to get the height of the entire document with JavaScript offers solutions that fail here for the same reason.
How do I find the body height where the body height is less than the viewport height?
To prevent this trouble, you can use CSS Viewport variables to define your body height equal to the viewport! See above:
body {
height: 100vh;
}
In this case i am using the vh variable, that corresponds to the Viewport Height. Check the other options of viewport variables that your can use.
I have a block that is of size 180x270 that I need to show images
The image sizes can vary, and I want to make sure it expands or shrink so that the smaller border (either height or width) matches the block, whereas the larger border gets cropped while preserving aspect ratio.
Examples are the following:
- An image of 360x600 gets resized to 180x300, and I crop the height from 300 to 270
- An image of 100x135 gets resized to 200x270, and I crop the width from 200 to 180
Basically I want to make sure there's no white space as I expand/shrink the image while preserving aspect ratio by cropping the section exceeding the block
Any suggestions on css or javascripts that can handle this?
It seems like you're looking for background-size:cover, which works when the image is a background-image
background:url(imgurl.jpg) /* Other background image properties */;
background-size:cover;
Demo
Zach's solution is best if you can use a bg-image for the task, but if you need to use an <img> tag (there are cases when this is advised), then you need javascript to calculate the image's aspect-ratio and determine whether it is more squat or more vertically stretched than the target frame. Then there's a little CSS as well:
JavaScript
//obtain a dom-reference for the image using getElementById
//or by some other means depending on what you know of its HTML
var img = document.getElementById('some-image-id')
var aspectRatio = img.clientWidth/img.clientHeight;
//if the img is more squat, set it's height equal to the target frame's height
if(aspectRatio > (270/180)){
img.style.height = 180 //image is
}
//otherwise the image is more vertically stretched
// so set the img width equal to the target frame's width
else{
img.style.width = 270;
}
This will set the
CSS
Finally, to center an over-sized image inside a wrapper vertically and horizontally, regardless of how the fit was made:
.wrapper{
position:relative;
display:inline-block;
}
.wrapper img{
position:absolute;
top:-9999px;
right:-9999px;
bottom:-9999px;
left:-9999px;
}
I am trying to draw a spotlight on some page elements during a user interface tutorial (see CSS3 spotlight effect using a rounded rectangle with gradients).
For example, here's the navbar:
and spotlighted (rest of the page is dimmed out):
However, one of the elements on my page is giving me trouble. Here's it's positioning in Chrome:
However, jQuery thinks it is 330px by 60px:
> var blah = $('.user-list')
[
<div class="well well-skinny user-list">…</div>
]
> blah.height()
60
> blah.width()
330
This results in a spotlight that is too small when it is drawn:
The weird thing is, there are lots of other elements on the page (like the navbar) whose sizes are calculated correctly, and the spotlight shows them properly.
What is up with this element that causes jQuery to show an incorrect height and width? Some additional information:
The entire page is on border-box sizing except for input elements, which don't play well with bootstrap.
There is 9px padding on all sides with a 1px border, which makes up for the size discrepancy, however there are many other elements with border/padding where the size calculation works properly, and this is the only element that is weird. For example, the bootstrap navbar shown above has 20px of padding on the left and right sides, but the width is calculated correctly.
Width is poorly explained in many places, however, it is more properly defined as the width of the "context box". More information, here.
A css width of an element is (according to box-sizing css property)
if(it is border-box)
css width = element content width + padding + border
if ( it is padding-box)
css width = element content width + padding
If(It is content-box , which is by default)
css width = element content width
and so for height
jQuery .width() always give the element content width.
If you want elements width and height with padding you can use .innerWidth() and innerHeight() method.
If you want include border size than use .outerWidth() and .outerHeight()
Let me explain this question. I'm working on a responsive website that need the image to be scaled depending on the window's width. Do I have all set those image with this style
.bgImg{width:100%; height:auto; display:block; position:relative;}
and I have make a 3 column group like this
the thing is when the height of the window becomes odd, both 25% column have now a margin of 1px at the bottom
You'll need to zoom in the image above since it's only 1px.
I was wondering if there's a way to fix this or any javascript that could force the image height to round up to the nearest even number so all my image's height will be even and will fix that problem.
Added a fiddle http://jsfiddle.net/2QneE/3/
I've got a very high resolution image which is meant to be displayed on any size monitor. The height is to always show in its entirety and the width will be scrollable via JavaScript. The containing element will have an overflow-x set to hidden. My question is how to best handle a variable height and still maintain the correct proportions.
Thanks for any help.
If you only set one of the dimensions (height or width, max and min also apply), the other will be scaled proportionally and maintain the aspect ratio.
You can try using the max-height property. The value can be in pixels or percent.
max-height: 100%
Or
max-height: 200px; /* whatever height */
This will constrain the image proportionally.