I have learned how to work with Canvases in HTML5, and I have a question.
Is there a way to make a canvas not stretch the other elements on the page? For example I have some text, if I put a canvas of 500px wide, the text is sent to the right to make space for the canvas, is there a way to put the canvas under the text or simply make it not stretch the other elements in the page, or is there simply a technique used to appropriately position canvases in a way so that it is where you want it to be exactly?
Thanks for your help.
Just treat the canvas as you would treat a div. The way you size/position a div, you can do the same with canvas. If you are having a specific problem adjusting the canvas, post the code you are using.
Edit : Also, be careful if you are setting canvas height/width with CSS as it only changes the element size, not the drawing surface size. To make sure both the element and drawing surface size changes, use the width and height attribute.
You should include the width and height attributes in the canvas element.
canvas.width = 600;
canvas.height = 600;
If you want to fit to screen automatic see question below
Resize HTML5 canvas to fit window
Use css-style z-index to make your text above canvas.
Sample css:
#canvas_id
{
position:absolute;
width: 100px;
height: 100px;
top: 100px;
left: 100px;
z-index:-1;
}
#text_div
{
position:absolute;
width: 100px;
height: 100px;
top: 100px;
left: 100px;
z-index:0;
}
A canvas is a flow element. You can position it exactly as you do with other flow elements, for example a div. It has default dimensions (300 x 300) but otherwise behaves mostly like a div.
To go on the next line, you may do this :
aaa
<br>
<canvas id=a></canvas>
There are so many possibilities with CSS (the same than with all flow elements) that it'd be hard to list them.
Related
I have this canvas on my webpage, but whenever I load it, whichever way I resize the screen, it always ends up with a scrollbar for the horizontal and vertical axes. How can I fix this? My monitor does have a different aspect ratio, so does that affect it in any way? I can't really give any refernce code as the only time I even mention the width and height is the first time I set the values:
canvas.width = 1280;
canvas.height = 720;
Help would be really appreciated, I'm in a sort of crisis right now XD
EDIT:
This is sort of irrelevant, but here's all my code on codepen
Just add box-sizing:
canvas {
box-sizing: border-box;
border: 1px solid black;
height: 100vh;
width: 100vw;
}
The reason the scroll bars appear is that the canvas element uses the border that exceeds the window boundaries.
Try the vh and vw property of css. Should use your screens vertical height as the default. Should help. Set them to 100.
I have got a tiny problem, im creating a website and i want to give an image a max-height. The image may only have the same height of another div.
You can check the layout here: http://bit.ly/1OAGsLR
Its about the 1920x1080 image, and i needs to be the same height as the div with class box left to it. If right the image should scale well.
But im trying all i know but i dont get it working, can someone get this working with CSS or do i need to use Javascript for this?
Thanks in advance!
Your image is looking the way you want when the screen width is at or above 1400px. You should consider using css media queries to move or adjust the image at different screen widths. Your layout could easily be handled using a css framework like foundation or bootstrap which would take care of css media query breakpoints for you.
If you are intentionally trying to not use a css framework, I'd check out this css media queries tutorial to get you started.
You need to make your container div wider.
Your container is 1200px wide, and your boxes are 560 + 40 padding wide each.
That means that the max width of you image is 560px.
Now to conserve it's aspect ratio of 16:9, the max height of the image is 560 / 16 * 9 = 315 pixels.
Okay, your main problem is that heights don't like to be defined this way. I have a solution for you that will 'solve' this issue, but its not very pretty and you might want to look into doing this with javascript anyhow. Below is a very rough example mockup.
body > div {
width: 100%;
max-width: 500px;
background: green;
padding: 10px;
position: relative;
}
body > div > div {
width: 50%;
padding: 20px;
}
body > div > img {
position: absolute;
right: 20px;
top: 20px;
max-width: 50%;
/* make sure to fall back to 80% so theres at least some gutter for older browsers */
max-height: 80%;
/* use calc to make the image the height of the relative parent minus padding */
max-height: calc(100% - 40px);
}
<div>
<div>Push<br />Push<br />Push<br />Push<br />Push<br /></div>
<img src="http://placehold.it/350x150" />
</div>
In short, this will place your image to the right of your box, give it a max-height (because positioning can do that) and a max-width (so smaller screen sizes don't freak out).
Now you could easily translate this a more general system where .box + .boxget a absolute position, or you could define a class for the box that has to push content and add that to the first box, making all other boxes absolute.
I fixed it by using JS, im using the following script:
<script type="text/javascript">
function changeheight(){
var Height = document.getElementById('box').clientHeight;
document.getElementById('imagebox').style.height = Height+'px';
}
</script>
I have a responsive background image with a smaller image positioned over it. I am trying to keep the smaller image at a specific location when the window is resized.
Both images scale properly, and the left position works so far, but not the top position.
img {
max-width:100%;
}
#dot {
position: absolute;
top: 17%;
left: 66.5%;
width: 10%;
height: 0;
padding-bottom: 10%;
}
I have found some questions with answers that suggest:
Vertical Alignment or Positioning with Javascript
I've also looked into .position() and .offset(), not sure if either would work.
I think my best solution would be to calculate the Y offset using the current window height as a reference but I am not sure what my JS or Jquery code should look like.
Here is my jsfiddle:
http://jsfiddle.net/melissadpelletier/xBu79/21/
I'm not sure exactly what you're trying to do with your images, but you could create a new smaller image (green dot) with the same aspect ratio as your background image, and have the dot placed where it needs to be within that aspect ratio. Then stretch the width of that to be 100% and the two images are basically overlapping, but the top image (smaller image) has a transparent background. Not sure if that all makes sense, but I made a new image and did the fiddle thing, which I'm new to: http://jsfiddle.net/ydack/
img
{
width:100%;
}
#dot
{
width: 100%;
position: absolute;
top:0;
left:0;
}
#dotImg
{
top: 0;
left: 0;
width: 100%;
}
I mistakenly placed the green dot's position based on the black outline, not the full background image, so the dot is slightly up and right of where it needs to be. BUT, the position is maintained while re-sizing the window. Hacky, but it could work!
You are definitely gonna need some javascript for this. What you can do is calculate the height and width of the image whenever you resize your browser window. Then simply use some math to calculate the position of the dot relative to those dimensions.
var height = $('#image').height();
var width = $('#image').width();
/* change the fractions here according to your desired percentages */
$('#dot').css({left: width/2, top: height/2});
$(window).resize(function() {
height = $('#image').height();
width = $('#image').width();
/* change the fractions here according to your desired percentages */
$('#dot').css({left: width/2, top: height/2});
});
Try this code: http://jsfiddle.net/LimitedWard/FFQt2/3/
Note that you will need to also resize the dot according to the height/width of the image if you want it to always fit inside that box.
Edit: after further investigation, it is possible to do this in CSS; however, it's a lot sloppier because the dot doesn't follow the image if the window is too wide. This jQuery solves that problem by using pixel-based positioning.
http://jsfiddle.net/sajrashid/xBu79/24/
plenty of errors mainly not closing tags
<div id='background'>
<img src='http://i.imgur.com/57fZEOt.png'/>
<div id='dot'>
<img src='http://i.imgur.com/yhngPvm.png'/>
</div>
</div>
Is there a way I can resize, crop, and center an image using html/css only? (img tag or css sprite)
For example if I have a 500x500 pixel image,
I want to resize that to a 250x250 pixel image
I want to make the actual visible image to be 100x100, but still have the scale of a 250x250 sized image.
I want the center of the image to be at a location x,y.
Is that possible with only html/css, if not, how do you propose I go about it with javascript?
Edit - 動靜能量:
For (2), say my scaled image is now 200x200, and I want my visible image to be 100x100: So I guess what I mean is I want the scale and resolution of the image to be 200x200 but I want the visible image to be 100x100 or in other words the visible image would be at coordinates x,y: 0,0; 0,100; 100,0; 100,100; of the 200x200 image. Sorry, but I'm not good at explaining this.
Update: an example at http://jsfiddle.net/LTrqq/5/
For
You can just use CSS's width and height for the <img> element
It can be done by (1), and place this image into a div, and position: absolute, with a desired top and left, and place it in another div with position: relative, and this outer div can have width: 100px, height: 100px, and overflow: hidden
same as (2), with the desired top and left value.
We need the position: relative for the outer div in (2), because we want the inner div to position relative to this outer div, rather than relative to the whole document.
For the top and left, it is like top: -50px; left: -50px as an example.
Just done this off the top off my head but it should be nearly there if not completely accurate. The -X and -Y coordinates are what get you to the crop offset. So for example if you want to crop from 20x30 you'd make them -20px and -30px.
<style>
#crop { width: 100px; height: 100px; display: block; overflow: hidden; position: relative; }
#crop img { position: absolute; left: -X; top: -Y; }
</style>
<div id="crop">
<img src="500x500.jpg" width="250" height="250">
</div>
If you want to center it though and you know the size of the image in the crop container you could use the following CSS instead:
#crop img { position: absolute; left: 50%; top: 50%; margin: -125px 0 0 -125px; }
125px is half of 250 so it should make it central.
You can definatley size the image to any dimenson then place it in a div and hide the overflow to acheive a crop look. However if you actually want to crop the image so that say someone wants to download a copy of it cropped and scaled check out: http://deepliquid.com/projects/Jcrop/demos.php
But if you can at all try PHP, http://www.binarymoon.co.uk/projects/timthumb/
is very easy to use, just put it on your server and point your img tag src to it.
example: < img src="/timthumb.php?mycat.jpg&h=250&w=250" />
In my intro page I have a really big image in height and width to fit all the resolutions (more than 4000px in width) and I set it as below:
#source-image {
width: 100%;
position: absolute;
top: 0;
left: 0;
}
Then, I added some text over that image with these style properties:
.description {
position:absolute;
top:510px;
left:23px;
width:340px
}
And it looks properly (and as I want it to be shown) on my 15.6 inch laptop with 1366x768 resolution.
However when my roommate saw it on his high resolution monitor the description was not on the “right” position. Of course, I understand why this is happening.
My question is how can I keep dynamically the proper position of the description text in all resolutions?
Thank you very much.
Set the distance from the bottom, not from the top. Or set it in %.
EDIT: I've adapted one of my experiments into an example: http://dabblet.com/gist/2787061
The position of the description is set relative to the bottom and the left of the image container (the image is filling its entire container).
In the first case, the distances to the left and the bottom of the image container are fixed, in px.
In the second case, they are in % and change on resizing the browser window.
Basically, the rules that do the trick are
figcaption {
bottom: 5px;
left: 23px;
/* more rules here */
}
in the fist case (fixed distances, in px) and
figcaption.perc {
left: 10%;
bottom: 17%;
}
in the second case (percentage).
Also, please note that you don't need position: absolute or to set the top and the left properties for the image.
However, you do need to set position:relative on the parent of the description box.
For the image to fill the screen horizontally, you need to have margin:0; and padding:0; on the body element and width: 100%; and margin: 0; on the figure element. I've edited my example to reflect these changes http://dabblet.com/gist/2787061
For the image to fill the screen both horizontally and vertically, the easiest way is to not even use an img tag, but simply set the image as a background image for the body and set the height for both the html and the body elements to 100% - example http://dabblet.com/gist/2792929
Be careful for two reasons: one, this will really distort the image and can make it look ugly when resizing the browser window and two, if you need some content below the image you will need to give the the outer element position: absolute and set its top: 100%. Both these two aspects can be seen in the example I've linked to. You can simply remove the content below the image if you don't need it.
use position:relative; for the div that wraps the image, and position:absolute; for the text div
please set percentage
check the example- description box set in horizontal center,
first set position relative into wraper div
.description {
position:absolute;
top:510px;
left:50%;
width:340px;
margin:0 0 0 -170px
}