I am creating a sprite via photoshop and have run out of canvas width .However when i try to increase the canvas width all the positions of the icons in the css seem to go off . I am using the relative increase method .
How do i only increase the height without affecting the css positions of the current layers ?
Although this has nothing to do with programming (SO is about programming issues)
You need to click the top-left box from the anchor section of the canvas size, so that the expansion happens only on the right and bottom. This way the positioning of the current contents does not get altered..
Related
I have written a fairly basic javascript function that when an image is clicked on a full sized version appears in the foreground.
The image is set with max-width and max-height numbers in a CSS file such that it leaves some space around the outside and it preserves it's own proportions.
The problem is that if the image happens to not be large, or the screen of the users device has a very high pixel density then the 'larger' image might not be any larger.
Is there a way I can keep proportions, not exceed say 90% on either side, but set the largest dimension to be 90%.
The closest similar method I have found is the fill option for backgrounds.
Cheers
Set the width and height of the image to a relative value like 100% - (margin + border + padding) so that it will be stretched regardless of its actual dimensions.
Using max-width and max-height is a nice way to restrain your image from growing beyond specific proporitions, but leaves room for the image to decide what size it wants to be within those bounds. You say you do not want this, thus set width and height as well.
You can embed that image in div tag and apply css property width:100% to image and on click of image increase the width of div proportionately as per the resolution. In this scenario image with less width than parent div gets adjusted as per width of parent div.
I'm experimenting with using a canvas as an image cropping preview and then use getDataUrl() to retrive the data to send to the server via an AJAX post.
I've explicitly set the initial width and height of the canvas in the HTML using pixels, but I scale the canvas using percentages in CSS to fit a responsive design.
While it would make sense that scaling a canvas element wouldn't affect the pixel content, I'd like to be certain. Will scaling a canvas element, not its content, return a different number of pixels than what I initially set?
No, scaling the canvas with CSS do not affect the actual pixels it contains.
You can look at the canvas as an image, it can be stretched but the actual pixels in the source image will be the same.
Is the background-position css property used to indicated where in the element should the image be displayed (like this) or what part of the image should be displayed (like when using sprites) ?
In my instance i have a div of let's say 300px width, i want the image to be shown in the right part of that element so normally i just added a center right to my background declaration, though now my image is a spirit so how can i control the coordinate of the image that i want to display ?
Seems to me that this background property act in 2 different way.. Am i missing something ?
If the place where you want to put element of the sprite is larger then the element then you need to put white space (trasnparent) around it. And you can't use keywords like center, you need to use pixels, because you will center whole sprite and not your element.
Using sprites is like using window where background is larger then background image so you need to position the window (actually you position the background).
If your container is larger than the background sprite image part you want to display then the other part of image will also be displayed. Better use Sprite cow to generate sprite it will give you the css for different parts of sprite image
http://www.spritecow.com/
What I'd like to do is something like:
<div> (parent, sized to img)
<div> (movable within parent, z-level 1+)
<img /> (z-level 0)
</div>
</div>
With these constraints:
The html img needs to be able to have its src (and size) changed from Javascript.
The top z-level div should be able to have its size changed from Javascript, also it follows the mouse (by javascript). I'd like to use relative positioning, so the coords match the img dimensions. Maybe absolute would use the parent dimensions? (same as img)
The outer div is just there so I can read mouse click positions from it. It should be able to have its sized changed to follow changes in the img src.
I have a use involving high and low res images of the same material. I'd like to show the low res image with a movable zoom box (transparent div with border), then when the user clicks it resizes the img object and outer div and loads the high res image, then scrolls the window to center the corresponding (scaled) spot on the high res image. There's no actual zoom, it just works that way by scrolling the high res.
I've got everything working except the zoom box: it loads the high res and scrolls ok on a click. To be able to set the z-index on the movable box higher than the img but still have the movable box layer use the same coordinates as the fixed div and the img is the problem. The box needs to float over the img. I'm not using the image as a background partly because I need to stretch it in y.
The site owner thought it might help to prevent theft of his images if he squashed them to a distorted aspect ratio. I calculate a height and force the img to use that, which makes them look better. Different images have different aspect ratios, which is why I want Javascript control over the size of the zoom box.
Using the :before and :after pseudo selectors new in CSS3, you can easily have 2 extra layers on the same object.
This is good for applying layers on the same object, as it means that you won't have to be messing about with having to float and adjust the margin of the original element and other such hassles.
http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/
I guess you would like to take a look at several ways to protect Images, as per your last demands. here
I am using the built in canvas widget (javadoc) and wondering how to make it take the full browser window.
I tried setting 100% width and height and removing all padding and margins, for body,html and canvas.
I have 3 problems:
1. I checked with chrome's dev tools and the clean.css seems to override myproject.css
2. Even after those css rules and removing the margin on the body in the dev tools, there is still a vertical scrollbar.
3. I struggle a bit with the fact that the canvas coordinate space is independent of actual pixel size. The mause events give me pixel location. Is there a way to get events in coordinate space "pixels"?
After another 4 hours of fiddling I found the answer, and decided to share:
1. I saw that the way i used to load css was deprecated so i used client bundle
2. This was my main problem, solved by explicitly disabling scrollbars
Window.enableScrolling(false);
3. setting just the coordinate space will automatically adjust pixel size to it.
So basically for a full window canvas: 100% width and height and 0px margin in css for html and body. Adjusting coordinate space to client size in the on resize event and explicitly disabling scorllbars.