I'm trying to create an image object or canvas object that will resize based on the window dimensions, but keep the aspect ratio. Is this possible?
I know that with canvas, you can maintain bicubic scaling, but is it possible to have the image scale on the window resize while maintaining the aspect ratio?
You might want to give this a shot:
http://css-tricks.com/how-to-resizeable-background-image/
Related
I want to crop the image in React.js using for example the <Crop url='example.com/image' width={96} height={96} aspectRatio={1}/> component.
This solution looks pretty suitable but I can't set custom image size.
Object-fit allow you to resize an image , crop it and preserve its ratio.
object-position can set areas to be cropped.
I have a canvas element of size 1024x768 where I draw a very large image, let's just say with width >> 1024 and height >> 768. The image can be scrolled with normal scrollbars to be seen entirely.
Users can click onto the canvas to add vertices to a polygon: each time a vertex is added, a line from the new vertex to the mouse cursor is drawn.
Each mouse movement onto the canvas updates the canvas in order to redraw such line from the vertex to the new mouse cursor position.
Being the image VERY large, redrawing is very slow, so I'd like to just redraw the currently visible chunk of image or, even better, the "sub-chunk" that is affected by this line.
The problem is: how do I detect the current topLeft and bottomRight of the visible part of the context according to how much the user scrolled the image? Basically I'd like to add support for a custom viewport, but I can't seem to exploit the scolling information to determine the boundingBox of the chunk to crop from the original image.
I actually have a canvasDiv container, which is the real scrollable element, not the canvas itself.
This means your canvas is the full size and you're using the container div as a sort of a "frame". That's really bad as canvas pixels are quite expensive, especially if you're not even using them (they're out of the viewport).
The best approach here is to set the canvas size to the container size and use the drawImage function to control the scrolling. The original image would be places either on an offscreen canvas or an image element. I can guarantee you a much better performance this way.
You'll lose the scrollbars, that's the downside.
I'm assuming you create the scrollbars by having a larger canvas element contained inside a smaller div.
Instead, you can mimic this setup by:
Having a canvas the size of your container div.
Add 2 input type=range controls to act as vertical & horizontal scrollbars (or grab a jqueryUI scrollbar plugin if you want to be fancy).
Then you can use the clipping version of context.drawImage to draw only the portion of the image specified by the range controls. The clipping version of drawImage looks like this: drawImage(myLargeImage, clipX,clipY,clipWidth,clipHeight, 0,0,canvas.width,canvas.height)
I'm trying to take div and resize it according container which is resized on window.resize but i need it to mach some specific aspect ratio.
var hconainer,wcontainer;
hconainer=$('#container').height();
wconainer=$('#container').width();
now i need that h:w=some specific aspect ratio.
I am trying to resize all elements on a web page upon resizing the window. The background image needs to stretch along with draggable items, text boxes, font size, and other images. The draggable items needs to stay in the same place in proportion to the background image. Everything needs to maintain aspect ratio. I have tried numerous methods and none seem to work.
As far as the background image scaling to whatever is going on on the page, see my reply to this guys similar question.
resize the image to fit the dimensions of TD
as far as other objects changing but maintaining aspect rations you may want to look into css Media Queries.
good luck
I need my site to be able to resize and crop an image based on the viewport on a browser. I've so far managed to dynamically resize it with an imagemap, but can't seem to crop it dynamically. I'd like it to crop and scale simultaneously without distorting an image. The image I'm using is 1920x1080 which is far bigger than most browsers so cropping the edges while scaling would make it appear similar on different browsers.
I use this jQuery plugin quite often. :)
http://srobbin.com/blog/jquery-plugins/jquery-backstretch/
It sounds like you can already detect the viewport size somehow. You just need the CSS or javascript to crop an image. In that case, I'd recommend this article:
http://cssglobe.com/post/6089/3-easy-and-fast-css-techniques-for-faux-image
You could
1) Use negative margins.
2) Absolute position the image in a smart way.
3) Use the CSS clip property.