How do you have a background rectangle (say the one from the cam segmentation example) fill the screen while keeping aspect ratio of the imported image?
You can do this using patch editor:
Image Ratio:
Screen Size:
Horizontal Fit:
Vertical Fit:
Related
I have an image . i want to make it a body background image but the image is stretched all the solutions i found so far on internet to resolve this problem and maintain aspect ratio lead to cropping image and this is what happen when setting (bg-size : cover) the image aspect ratio is maintained and it fill the page but the image is cropped
so Q here is how i change any image width and height values without stretching or cropping it .......
first one is original , second is stretched third image is cropped
What you are asking for is impossible - for the image to cover the entire screen/window without cropping or stretching, it would have to have the exact same dimensions as the screen/window.
I am using imgAreaSelect.js for image cropping.
Suppose there is an image of a 'rectangle' shape in the middle of the picture. On larger screen (desktop) when I select the rectangle shape, imgAreaSelect gives me its width & height (say 250 x 150 ). While on a smaller screen (mobile phone) it gives me width & height (say 100 x 50).
I use canvas to draw the cropped image on. So far I have been using the width & height obtained during selection as the width & height of the canvas. This produces images whose dimensions are bigger for the bigger screen while smaller for the smaller screens.
Is it possible in any way to get an image of a standard dimension whether it's cropped from a larger or smaller screen? If yes then do explain with some codes if possible. Thanks
So I have a horizontal banner that I defined via a div. This div has a width of the full window and fix height of 500px for the time being. How can I scale an background image (2048 x 1283) to fill the div entirely without loss of picture quality? How would I do the same if the div height was relative to the window size, perhaps 25% or 50%? I want this to work when the window is resized.
Well you will never loss picture quality because you are keeping rendering the same picture over different sizes. You have to understand that responsive background its a hard topic since the picture will never display exactly how you want to, since different devices will have different display resolution, as example if you are seeing the same responsive image in your iphone portrait format (vertically) will look smaller in height than if you see in the same device but in landscape format (horizontal).
Any way heres is a question that can help you in your journey of responsive backgrounds Responsive css background images
cheers.
--- EDIT
if you want to achieve a full background http://css-tricks.com/perfect-full-page-background-image/ see this information.
Is there a way to determine the height of a background image when it's being used as a responsive image?
IOW, I want to know the height of the background image at a specific screen-size (but I don't know the actual screen size because that's the responsive part).
I know how to find the height of the image via the actual image file, but that's not the same thing as the image's height within a particular screen size.
Html canvases have max sizes depending on device/browser. Eg some mobiles have roughly a 1000x1000 canvas max. What about images stored in memory? Can these be up to the ram of the phone/pc? Can you 'drawImage' large images to these 1000x1000 canvases where it does auto-cropping? (I don't have a phone to test this even for a specific device.)
The max size of an image object is probably browser or memory dependent.
More to your question...
The image object you draw into the canvas can be larger than the canvas.
This causes the canvas to become a "viewport" into the image.
For example:
Your canvas is 1000x1000.
Your image is 1500x1500.
If you do this then the image pixels will be cropped at x>1000 and y>1000.
// canvas shows image pixels from x=0-999 and y=0-999
drawImage(yourImage,0,0)
If you do this then image pixels will be cropped at x<200 & x>1200 and y<200 and y>1200.
// canvas shows image pixels from x=200-1999 and y=200-1999
drawImage(yourImage,-200,-200)
A mental exercise to see how this works is to imagine a piece of paper with a rectangle "viewport" cut from it. Then move a larger-than-viewport image behind the paper. Only a part of the image will only be visible through the viewport. You can move the image and a different portion of the image will be revealed in the viewport.