I would like to place a canvas on top of an image that I have on a page. The canvas will be the exact dimensions of the image.
However, the following conditions must be met:
The canvas must remain exactly on top of the image at all times. Therefore, using absolute positioning will not work because if content is inserted above the image, it will move the image down without moving the canvas.
The image may be resized from its original size. Therefore, replacing the image with the canvas and setting its background to the image will not work.
What options do I have?
You should be able to use position:relative instead of absolute for your first requirement.
For the second I'm guessing you could put both the image and the canvas inside of a span. The canvas would have a width/height of 100% and would be resized as the image resizes because the size of the div would change to fit the image.
EDIT: actually I'm not sure position:relative would work. But I believe if you use position:absolute and the parent element has position:relative, than the absolute positions will be relative to the parent.
Related
I am having more div over an image.and i am having zoom in and zoom out option to resize the image.when i resize an image, i want to resize the divs present over an image. How to achieve it using HTML and css.
The image needs to be placed as a background of a div and the other divs then need to be positioned absolutely against that div e.g. like this:
I would like to create a background image inside a container that is about halfway down on the page. The height would maybe be 20%-30% of the screen height. Do I need to create more than one image and use CSS Media question to display one image and hide all the other images for each resolution range? Or, is there an easier way to make the image scale automatically. Does it help if the image is in vector format?
If you want the image to always cover the div, you can use CSS3's new background-size values:
background-size: cover | contain;
cover
With cover, the image will always fill the whole container no matter the size, the browser will adjust the image, and the image might get cropped.
contain
The whole image will be always visible, i.e if the container gets smaller than the image, image is scaled down to fit the container, this way, it's normal to see empty spaces in container.
I know how to resize a div, but this one that I'm working with has a lot of elements inside it, like buttons, etc. How could I resize those all in one shot? I really don't want to manually resize each one.
Use % and it will resize relative to the size of the containing element. In this fiddle, the css for the button is the same, but is relative to the size of the containing element. I've used percentages for the padding as that's what I'm using for the size of the button here, but you can use it on width/height as well if you wish:
relative sizing (jsfiddle)
One thing to note - because the font size isn't being set relatively here, the button size isn't scaling the same way, but you can use percentages for that as well.
Setting max-width and max-height to 100% for an image does what's intended and scales the image to fit it's container with aspect-ratio intact. However, I need to achieve the same thing but with an extra container kept tight around the image (to be able to position other stuff relative to the image).
I'm looking for non-JS solutions and mark-up semantics is not an issue since this is for an app. (tables would be ok). Also image dimensions can be considered known.
Another way to describe what I want: Make an image always fit inside the body and display a border around it (not using the trivial solution of putting a border on the image itself)
Here is a fiddle showing the problem. I gave the image an 0.5 opacity to make the yellow container show through. The objective is to have the container always the same size as the image. Ie. the image will always have a yellow tint but no other yellow areas should be visible. Note: I'm not trying to achieve any coloring effects it's just an illustration of the problem.
Try this one, http://jsfiddle.net/xmarcos/K4dHr/
Update: http://jsfiddle.net/xmarcos/K4dHr/4/
Here, this seems to work: http://jsfiddle.net/Wexcode/vzc4m/1/
You don't need to have a max-height around your <div> because it will stretch to the dimensions of its inner elements if you set it as display: inline-block. Forcing the <img> to have display: block will ensure that there isn't any extra space added around element inside container, unless you specify it (using margin).
I want to make moveable world for my HTML game so I put 1600x1200 canvas inside my 800x600 div element and using left and top to move the world. I expected that div will clamp size of my canvas, but instead my canvas overlaps borders of my div. The div doesn't stretch, the canvas is scaled independently from the div.
I tried !important, max-width and max-height, different displays, nothing works. Using CSS for width and height just scales the canvas. I also tried putting my canvas into SVG as foreign object, but I get error "getContext is not a function".
So, how can I limit size of my canvas?
The div is going to expand to the size of your canvas unless the div has overflow: hidden; set in its CSS. The child element is larger than the parent element, and you haven't strictly told the browser to limit the sizing of the parent element.
The max-width and max-height attributes won't help you here because you aren't placing "wrappable" content within the div. If you put text in a div with max-width set, the value will be respected. If you put an element with an unchanging size, like an image or a canvas element, the browser can't dynamically wrap it like a bunch of floating divs or some text. In this case, you have overflow, which needs to be handled differently.
You can achieve what you're looking for by playing with the position and/or margin attributes for the canvas element once you set the parent div to hide the overflow.