I have an icon for my "Tiles" but the image I am using is white and the text for the application is white so that does not look good.
I look at the local scout titles or the "xbox" tiles and the icon is only in the middle and does not stretch the whole tile like my image does.
I tried to change the size of the image I am using but it always just stretches it.
How can I achieve what the "xbox" tile has?
On Windows Phone 8, your tile must be 336 × 336 pixels. So create a picture with that size, put your icon in the picture at the desired size, then fill the gap between the icon and the border using the transparent color. This way, your picture won't be stretched.
Related
For example, if I have a background image of a cyclone and it's responsive/resizes with the window and covers the whole web page (background-size: cover), but the eye of the cyclone isn't in the center of the webpage but say slightly more to the right and I wanted another image, say a picture of an apple, to always cover the eye of the cyclone, no matter what size the window is, what could I do?
I've tried playing around with the margin percentages, the image of the apple is also responsive and shrinks with the background image to cover the eye of the cyclone but the images always tend to move out of sync just before I've dragged the window to it's smallest size.
The CSS background size property can have value of cover. The cover value tells the browser to automatically and proportionally scale the background images width and height so that they are always equal to or greater than the viewports
width/height.
In Img tag use height i and width in pixel then change in CSS
then output will show properly
Check the Multiple Backgrounds CSS feature which will achieve your request: https://www.w3schools.com/Css/css3_backgrounds.asp
I have been messing around with some new ideas in Javascript, but I'm not very good at making extremely detailed images in Paint, Paint.NET, etc. The problem is when I have a 64 * 64 image or an 8 * 8 and I want it to display 640 * 640 or 16 * 16; the images get blurry. I've seen many other forums and things were people ask this question or a similar one, but I'm relatively new to this and don't want to make the image larger in photoshop or whatever. On a similar note, can I display only part of an image at one time but have a larger image than shown, so that I don't have to make multiple images of the same thing?
Maybe this CSS attribute on your img helps:
image-rendering: pixelated;
I found it in this blog post:
https://css-tricks.com/keep-pixelated-images-pixelated-as-they-scale/
The reason your images get blurry when enlarged is because it is a rasterised graphic (pixel based image) and not a vector graphic (path based image).
When you try to enlarge the rasterised image, the pixels expand in size too which leads to the lower quality/blurry result (also referred to as 'pixelation').
The difference between vector and raster graphics is that raster graphics are composed of pixels, while vector graphics are composed of paths.
Source: http://pc.net/helpcenter/answers/vector_and_raster_graphics
You can't make it bigger without the picture becoming blurry. You are using a raster image. A raster image is an image that is made up of pixels. a color is assigned to each individual pixel. If you enlarge the picture. Each pixel will just be scaled so that it takes up more space on the screen. This will cause the image to appear blurry.
Here's an example:
rrr
rbr
rrr
"r" is a red pixel and "b" is a blue pixel. The dimensions are 3*3.
If you try to make the dimensions larger than 3*3, lets say 6*6, this happens.:
rrrrrr
rrrrrr
rrbbrr
rrbbrr
rrrrrr
rrrrrr
With the image was enlarged, each pixel just became bigger. In the larger image, each 2*2 square was originally 1 pixel in the original image. Now with this example, the new image wasn't blurry because it was just a square. But if you have a more complex image, it becomes blurry.
To fix your problem, use a vector image. A vector image is different from a raster image. Instead of being made up of pixels, it is made of shapes and lines and stuff like that. Each shape has a width, height, x coordinate, and y coordinate. Some shapes have even more variables. Because of this, vector images can be zoomed in indefinitely without becoming blurry. Sometimes when you zoom in on a vector image the quality even becomes better!
Here's an example:
rrr
rbr
rrr
Again, "r" is a red pixel and "b" is a blue pixel. Let's say this image has a width of 500. But you are zoomed out so far that it appears as a 3*3 square on the screen. In the center of the image is a blue circle. Now it doesn't look like a circle because it only takes up one pixel on the screen. So it looks like square. The circle has a fixed radius. and it is located in the center of the image.
Let's zoom in:
rrrrr
rrbrr
rbbbr
rrbrr
rrrrr
The image still has dimensions of 500*500. It is just zoomed in farther so that it takes up 5*5 on the screen. But the circle looks less like a square and more like a cross. and a 3*3 cross looks more like a circle than a 1*1 square.
The farther you zoom in, the more the image will look like a circle. But since you are using a raster image, enlarging it will result in a blurry picture.
To fix your problem use vector images instead of raster images.
For any form of res-sizing images, you will need a Vector-formatted image.
Vector formats are of the following:
CGM
Gerber format (RS-274X)
SVG
Image File Formats - Wikipedia
Use vector based graphics (svg), not raster bitmaps (jpg, png, gif).
Good thing about SVG is you can add CSS and JS to interact with it in a webpage.
Check this article on how to interface with the SVG
I can reproduce this issue in both Chrome and Firefox.
This is SVG image in question:
https://www.iconfinder.com/icons/284101/editor_hambuger_list_menu_view_icon#size=512
And this is the minimum code which reproduces the problem:
<img
style="width: 15px; vertical-align: middle;"
src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSIxMnB4IiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAyMiAxMiIgd2lkdGg9IjIycHgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c2tldGNoPSJodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2gvbnMiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48dGl0bGUvPjxkZWZzPjxwYXRoIGQ9Ik0wLjUwMDgzNjEzNCwwIEMwLjIyNDIzMTk3NSwwIDAsMC4yMTQwMzUwMzQgMCwwLjUwNDY4NDQ0OCBMMCwxLjQ5NTMxNTU1IEMwLDEuNzc0MDQ1MDggMC4yMTc3NDE3MjgsMiAwLjUwMDgzNjEzNCwyIEwyMS40OTkxNjM5LDIgQzIxLjc3NTc2OCwyIDIyLDEuNzg1OTY0OTcgMjIsMS40OTUzMTU1NSBMMjIsMC41MDQ2ODQ0NDggQzIyLDAuMjI1OTU0OTI0IDIxLjc4MjI1ODMsMCAyMS40OTkxNjM5LDAgTDAuNTAwODM2MTM0LDAgWiBNMC41MDA4MzYxMzQsNSBDMC4yMjQyMzE5NzUsNSAwLDUuMjE0MDM1MDMgMCw1LjUwNDY4NDQ1IEwwLDYuNDk1MzE1NTUgQzAsNi43NzQwNDUwOCAwLjIxNzc0MTcyOCw3IDAuNTAwODM2MTM0LDcgTDIxLjQ5OTE2MzksNyBDMjEuNzc1NzY4LDcgMjIsNi43ODU5NjQ5NyAyMiw2LjQ5NTMxNTU1IEwyMiw1LjUwNDY4NDQ1IEMyMiw1LjIyNTk1NDkyIDIxLjc4MjI1ODMsNSAyMS40OTkxNjM5LDUgTDAuNTAwODM2MTM0LDUgWiBNMC41MDA4MzYxMzQsMTAgQzAuMjI0MjMxOTc1LDEwIDAsMTAuMjE0MDM1IDAsMTAuNTA0Njg0NCBMMCwxMS40OTUzMTU2IEMwLDExLjc3NDA0NTEgMC4yMTc3NDE3MjgsMTIgMC41MDA4MzYxMzQsMTIgTDIxLjQ5OTE2MzksMTIgQzIxLjc3NTc2OCwxMiAyMiwxMS43ODU5NjUgMjIsMTEuNDk1MzE1NiBMMjIsMTAuNTA0Njg0NCBDMjIsMTAuMjI1OTU0OSAyMS43ODIyNTgzLDEwIDIxLjQ5OTE2MzksMTAgTDAuNTAwODM2MTM0LDEwIFoiIGlkPSJwYXRoLTEiLz48L2RlZnM+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBpZD0ibWl1IiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSI+PGcgaWQ9ImVkaXRvcl9saXN0X3ZpZXdfaGFtYnVnZXJfbWVudV9nbHlwaCI+PHVzZSBmaWxsPSIjMDAwMDAwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHhsaW5rOmhyZWY9IiNwYXRoLTEiLz48dXNlIGZpbGw9Im5vbmUiIHhsaW5rOmhyZWY9IiNwYXRoLTEiLz48L2c+PC9nPjwvc3ZnPg==" /> Menu
You can play with it and see it in action at:
http://jsfiddle.net/adamovic/s3dZ2/1/
Anyone has an idea why this Scalable Vector Graphics gets resize where lines becomes unproportional and also any idea how to fix this good?
BTW, in production I'm resizing this image to 1EM, to appear next to text "Menu" but to reproduce this issue it is the simplest way.
UPDATE: Updated example from 11.5px to 15px, reproducing same issue.
In production I'm using width: 1EM; or something like that for responsive design, any idea how to responsive scale this image so that lines are proportional?
Maybe some fix like min-width and max-width could work, but I couldn't make it work ever with some mozilla image specific commands.
At 11.5 pixels in with the height of the image should be 6.3 pixels. Of those, 1.1 pixels should be the height of each black line, and 1.5 pixels the height of each white line. And on top of that the browser resizes the picture to 6 pixels height.
If the image had 1 pixels for each line (both white and black) and the size multiple of 5, it would look great.
Later edit
In the given picture a black line is 16.67% of image size(all lines reprezent 50%) and a white line is 25%. So... for a height of 8 pixels the a black line has a height of 1.3 pixels and a a white line 2 pixels. On paper the smallest image that looks good and unaltered has 2 pixels for black line and 3 for the white line, meaning an image with 12 pixels height.
Basically if one pixel has to share both white and black lines the browser will create a shade of gray that is the average of the two as it can only display one color.
EX: a pixel has to show 0.67 white(#FFFFFF or 255,255,255) and 0.33(#000000 or 0,0,0) black:
0.67*255 + 0.33*0 = 170.85 (aproximatly 171) so the color displayed is (#ABABAB or 171,171,171)
Theoretically, SVG image is infinitely scalable. In practice however, the screen has limited resolutions, so if you scale an SVG too small, it won't look very good due to pixelations.
To avoid this problem, you need to set a minimum size for the icon at the point where it still looks good. High quality small-sized vector iconsets would usually be designed to have in such a way that their major lines lie in a grid of integer proportion for many different sizes, so that they will look crisp on different sizes; some icon designers might also provide a separately-drawn raster icons for low resolutions.
Inferring from the size declaration in the SVG, the icon you linked seems to have been designed for 22x12 or multiples of it.
On small sizes, you probably should also use media-queries so that small icons are scaled in a step-ladder of sizes with sizes that are known to look good rather than strictly depending on the viewport 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.
I have a large background image (3600x1600) for my website which I want to use at this resolution to cover pretty much all screens up to 2k.
However, my dilemma is that this image includes sky in it and the top 1000 or so pixels are literally just sky, meaning that at 1080p, all you can really see is the sky in the image, due to the fact that the browser will start the image at the top of the page and expand down as your resolution gets larger.
I need the background-image to stick to the bottom of the page and expand upwards as opposed to downwards, so all resolutions can see the city in the image and then the sky covers larger resolutions.
I've tried a few different things, scaling background to 100% using CSS3, which due to the aspect ratio of the picture leaves a white gap at the bottom of the page at 16:9 and the position "bottom" tag, just puts the bottom of the image at the top of the page which is ridiculous...
Any ideas of how to do this or if it is possible at all? Thanks.