I want my background image to fit the screen of the device. I have tried the basic code below
BG.height = stage.stageHeight;
BG.width = stage.stageWidth;
This works however, I have to choose EXACT_FIT to get it to fill the screen on different devices. THE ISSUE IS MY OTHER CONTENT GETS STRETCHED. I am wondering if there is a creative way to stretch the background using EXACT_FIT and then load in new content and find out how much the content has been stretched and reduced it to normal height and width.
In short looking for ideas or best ways to have access to full screen of device without having to stretch my content to funny proportions.
Related
I'm working on an AIR desktop project.
I have a scrollPane with a container assigned to it...
mainScrollPane.source = mainContainer;
The scrollPane is resized whenever the window is resized, in order to keep things fluid (it fits under a header container, and to the right of a left container)...
mainScrollPane.setSize(Math.round(stageWidth - leftContainer.width), Math.round(stageHeight - headerContainer.height));
mainScrollPane.source = mainContainer;
I'm dynamically creating movieclips and adding each one to the container...
mainContainer.addChild(boxMC);
In my library, boxMC is set to 400 pixels wide, yet I'm finding that each boxMC is displayed much wider than that.
When I resize the window, each boxMC doesn't scale in size (good).
I'm clearly not understanding the process for creating a fluid scrollPane that can be resized while having it's contents remain the size that I've created them at in the library. Can sometime please enlighten me?
Thank you.
The solution was not to give mainContainer width and height settings. So instead of mainContainer.graphics.drawRect(0,0,100,100); mainContainer.width = 500; mainContainer.height = 200; I just made it mainContainer.graphics.drawRect(0,0,100,100); then added movieclip don't scale their size when mainScrollPane is resized.
I apologize if this is not the correct community to ask, but I believe this has to do with HTML so I'm asking here.
I need a small banner with credit card icons (21px high).
I made it in PS and resized it to 21px height (auto width), but I wasn't satisfied with the sharpness.
I now load the full image in HTML and using height and width image tag attributes resize it to the same size I did in PS, but the result is much better.
1) Resized with HTML
2) Resized with PS
Chrome developer tool shows that both of the images are the same dimensions.
Why is there such a difference?
Browsers just display it as it would be 21px high, but higher dpi screens may use the full image to make it sharper. As in the screenshot you shared, both rows are actually ~90px high. Height doesn't actually resize the image itself, it just stretchs it to a smaller area.
Tip: Downsizing a large image with the height and width attributes forces a user to download the large image (even if it looks small on the page). To avoid this, rescale the image with a program before using it on a page.
From w3schools
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.
We are developing a responsive site where we allow a user to upload images.
We preserve the original and then generate a thumbnail image to be served to users with lower resolutions.
The issue that has been raised is that when the image is switched in the logic for the smaller screen size there is a visible re-flow of the elements around it.
I am unsure how to prevent this as the images are of inconsistent height so cannot set an initial height on the containing element.
Any ideas would be appreciated.
I looked at this:
http://andmag.se/2012/10/responsive-images-how-to-prevent-reflow/
But it seems to be only for scenarios where we know the ratio i.e. 16:9, 4:3 etc
I assume your thumbnails have a fixed maximum size.
You can put your image inside a box with the maximum height/width set so the orientations (landscape, portrait, square) doesn't matter. This would give you fixed whitespace around your image.
You can also generate this whitespace in the thumbnail giving you a fixed width/height in all your images.
I got a problem with images and its pixels probem.well let me tell you this.I got a picture of 2448 x 3264 pixels. So its a big image I just decided to reduce its size using this way
<img src="1.jpg" style="width:600px;height:500px"/>
But there is a problem I see, the picture looses its clarity and its visibility, it looks like pulled it close and the person in the images looks so ugly.but using the original size makes look so big . I am sure there is a way to do because I see google images result and also on some websites I tried to see thier code but Could not figure it out.
Could anyone please tell me how do i make the images look good even when they got too long resolution and make them fit in the given width?
Update
Okay now i understand we need some server side image processing and could anyone tell me what would be the way to do it Thanks
The most wide-used practice is to resize the image server-side. When the image is uploaded to the server (e.g. by the user) the server takes it and creates and creates needed thumbnails.
Unfortunately this cannot be done with HTML, CSS nor JavaScript. And there are a lot of cons of forcing the size of the image with CSS. For example the user have to download the whole image ( I guess yous is about 6MB ) and it could take a lot of time .
Withour any language you cant do it, or you have to edit the image and need to upload to your host.
Try using the plain html. It will also help if you have the right width:height ratio (in this case, 3:4)
so:
<img src="1.jpg" width="375" height="500"/>
To gain better quality you need something more, then only HTML. You have to resize images manually, either use some server-side scripting to prepare images before rendering (better even do it on uploading if you sure about specific dimensions).
What you need is server side image processing. For exaple phpThumb or another implementation depending on your serwer platform.
Example:
<img src="../phpThumb.php?src=1.jpg&w=600" />
the phpThumb will open image passed in src, and resize it to width passed in w -> the process image on the fly and outputs to the browser.
For pictures to maintain their clarity, you need to ensure that you maintain aspect ratio. Aspect ratio is the width/height ratio of images and if you resize images maintaining the ratio, then their clarity is maintained. You are getting the resized image to be messed up because 2448/3264 != 600/500.
Now tag resizes by aspect ratio, if you give only one of the attributes of width or height. eg:
<img src="your_src" width=600>
This will render maintaining aspect ratio(it calculates the height needed). However, this could lead to problem sometimes if you have a max-height constraint, because the recalculated height could exceed the div height, if your div has a max-height.
If you have a max-height and max-width constraint, you can use the following code to resize the image using JS. I am assuming that max-width and max-height values as 600px and 500px respectively and you can change as per your needs:
height = this.clientHeight;
width = this.clientWidth;
aspectRatio = width / height;
if (height > width)
{
height = 500;
width = height * aspectRatio;
}
else if (width > height)
{
width = 600;
height = width / aspectRatio;
}
this.setAttribute("height", height+"px");
this.setAttribute("width", width+"px");