I thought I would have found the answer to this question long ago, but I just can't seem to find it anywhere and I'm wondering if you could please help.
Put simply, I want an image to stretch (width only) to 100% of the monitor screen resolution.
Here's what I've tried....
style="position:absolute;width:100%"
This simply makes the image 100% the width of its original size.
style="width:100%"
This makes the image stretch to 100% of the website area (in my case 960px). This is not what I want, as I need the image to stretch 100% of the entire monitor resolution.
style="position:fixed;width:100%"
This makes the image stretch to 100% of the monitor area (yay!) but the fixed position of the image causes problems for the webpage. I'd prefer the image was absolute.
Any information you can provide would be greatly appreciated. Thank you.
Put the image in a div and set that div to 100% then set the width of that image to 100% however wouldn't this just stretch the image?
Related
I want to put some images on the screen.Then i choose openseadragon plugin to help me.
But i have two questions by using it.
Each pic is 256*256 size，but on my mac, is always biger than 256. As below pic shows.
I open it on other screens which is bigger than mine, it also show me bigger.
Maybe is the same quesion as question above.
Can any body give me same help?
Thanks very much!
Actually it should be 256 * 256, but acutally 264.74 * 264.74
Is similar to 256,but still bigger.
The closest you're going to get to displaying tiles with a 1/1 ratio of image pixels to screen pixels is by setting the viewer zoom correctly. Since viewer zoom is based on the width of the image, you'll need that value to compute it...something like:
viewer.viewport.zoomTo(imgWidth / viewer.container.clientWidth);
Trying to simply display an image at it's full size, which is bigger then the screen width and height. I do not care because I am developing a page for pinch and pan. So, the image will be off the screen anyways, and I would like to use a bigger image for pinch and pan, and it keeps setting the width to screen width when I just want it to show at real height and width. I've tried absolute layout, relative, and stack, nothing works. Here's my current code:
<controls:GestureFrame x:Name="GestureFrameMain">
<Image x:Name="ImageMain"/>
</controls:GestureFrame>
and in the backend, I simply set the source:
ImageMain.Source = Xamarin.Forms.ImageSource.FromUri(new System.Uri(PageParametersImageZoom.Image.BigImageURL));
I can verify that the URL has an image that is much larger than the screen size, here's an example of an image that would come back:
http://www.stage.newser.com/image/1088966-0-20161020082458.jpeg
And as you can see it's much larger than the dimensions of the screen, however, when I set the source, the image appears to be at screen size. I've attached an image of the result on the page, which clearly shows the image being downsized by Xamarin.
EDIT the pinch and pan itself is not the problem. When I pinch/pan the image obviously gets larger and goes off screen. I am talking about the initial load of the page, I would like the image to show at its real size.
Looks like the only way I was able to do this was by using a AbsoluteLayout and specifying the widhrequest/heightrequest properties on the image.
Thanks for reading this question :)
Goal:
I am using Fabric.js as a base for image editor (crop and resize features for now mostly).
My goal is to load some high-quality image (like photos) rotate or crop it and then export as DataURL (in original quality or near to it).
Solution:
To add such a big photo on canvas and be able to export it bad with the same quality - I set width and height of canvas equal to image's width and height (2560 × 1600px) and then compress it using css to 640x400px (editor size). (I used https://stackoverflow.com/a/17035046 as a base)
In this case I still can export image in big dimension using canvas.toDataURL() - it will be about 2560x1600 (this is my goal).
How it works: http://jsfiddle.net/handmade/Lqsb0kwv/4/
Problem description:
I've got a problem after adding zoom feature (canvas.zoomToPoint(...)) to my editor and it is related to css width and height limitation of canvas.
Try to change size of image using controls in jsfiddle above and you will see an issue.
Works fine if...
...if I don't use css limitation: http://jsfiddle.net/handmade/Lqsb0kwv/5/
Questions:
I've read 90% of Fabric.js docs, examples, tutorials, questions here on Stack Overflow, but I didn't find a solution for my issue.
I am not sure that using css to limit canvas is a good practice.
I am not sure that my way of getting back changed image in big dimension is a good way.
Does anybody know better way to export image in good dimension?
Does anybody know if issue with scaling/rotating image after zoom (+limited by css) is a bug in Fabric.js?
Thank you for any answer!
I have to reduce the dimensions of a JPG image to exactly 350 * 450 pixels.Please tell how do I do so.My JPG image is of dimensions 392*520 pixels.
UPDATE:
Ok, thanks for the answers . Checking them now.
Thanks.
You can't do that with a linear operation, the ratio of the image will be skewed.
There is nearly 3 % absolute difference, I don't know how much that is to the human perception.
350/392 = 0.8929
450/520 = 0.8654
I would recommend scaling it to 89% and then cut the rest of the image to get your 350 * 450. This way you would keep the ratios intact.
You can use paint. Go to the resize button (on top of the rotate button) and click the radio box that says pixels. Choose the amount of pixels you want.
There are many online resize tools, e.g.: http://www.picresize.com/
Upload your image, enter its new dimensions and download it again.
When the width of the brower is changed, the image's width or height is also changed dynamically, anyone knows how to do it?
And I found the image's max height of each rows is not the same.
Thank you very much.
I am sure Google's image application is a little more complicated than can be written in a single post, but you could mimic some of the effect with some clever use of jQuery. Here's a quick tutorial on a resizeable image grid using a slider -
Image resize tutorial
You would need to change the trigger from a slider to the resize event, but this has the basics you need.