I want to have an image that has to cover the entire screen or at least one of the sides so that it keeps its aspect ratio.
How do I do that considering the various screen sizes and DPI?
FlexGlobals.topLevelApplication.screen
returns the screen rectangle, and
FlexGlobals.topLevelApplication.applicationDPI
returns the DPI of the application.
But in Flex you can simply set an s:Image control's width to 100% of the view, then it will cover your screen. (and dont set the height, Flex will figure it out for you)
Related
I'm trying to create a responsive web site. For that I found a nice looking template and adjusted it according to my needs.
One thing however came up where I couldn't find a solution so far - and that is resizing of images with different dimensions.
Let's say I have an image with a width of 600px and one with a width of 500px.
My screen size is 700px. I want both images to be shown at their native width (600px & 500px).
Now I reduce my screensize to 550px. I want the 600px image to be resized to 550px. No changes to the 500px image because the native width is still smaller than the screen.
Now I reduce the screensize to 400px. Both images should now also be reduced to 400px accordingly.
I've been googling and reading here for hours but could not find an automatic solution for this.
Best thing I found is is setting <img style="width:100%;max-width:xxx px;" where xxx is the original width of the image. But... I'd have to do this manually for each and every image!
Without max-width the image would always be strechted to 100% of the screen size.
As an alternative I found some JavaScript that calculates the original width of the image and could be used to fill out the max-width value.
If someone disables JavaScript (EG by using NoScript browser adddon) the whole thing wouldn't work.
Since I'm printing out my website using Perl I could do the calculation with Perl as well. That would help against disabled JavaScript. But still...
Are there really no better solutions? Do I really have to calculate the max-width for each and every image?
Here's the current work-in-progress: https://www.digioso.org/html5up-striped
The template features an image fit class that basically sets the width to 100% of the container and then I added the same image using width=100%;max-width=400px .
The image fit makes the image always use 100% of the screen which I don't want.
Thanks a lot!
Do not apply an explicit width or height to the image tag. Instead, give it:
max-width:100%;
max-height:100%;
check: How do I auto-resize an image to fit a 'div' container?
If you have something like this in your css:
img {
width: 100%;
}
The image tries to assume its actual size and is automatically adjusted accordingly with the container.
If you need to resize the image when your screen gets smaller, you can use #media and define the relative behaviour.
#media (max-width: 700px) {
img {}
}
I use Foundation 6 and have some images in two column groups.
When i resize the browser viewport from 1200px width to 1024px width the big image gets smaller, the width shrinks see pictures below.
Is there a way to permit that?
I would prefer a constant distance between the big image and the small image, to set a fix "B" value (second image) that is independent of the user's viewport.
See full webpage can be seen on https://fadendaten.herokuapp.com/t/categories/clothing
Its because your class .product-teaser-column has fixed width. Change that and it will be responsive again.
.product-teaser-column {
width: 470px;
}
I'm having some issues with fluid images when using a max height. I'm trying to bound the image in a box that is at most 450x450 or any arbitrary box thats not in the same aspect ratio as the image. What's happening is that the width of the image is being restricted to 450px but the height is not and the image is overflowing the wrapper div.
my code is:
<div class="wrapper">
<div class="container">
<img src="http://i.imgur.com/iw4yOa0.jpg"/>
</div>
</div>
see http://jsfiddle.net/5fuZ5/ for full code and css.
I know I could achieve this by using jquery but I need a responsive solution that doesn't require javascript.
OK i've got a similar issue and could find nothing to help. My situation is that i have a single column of images that are fluid (fit their container 100% in width) works fine for landscape images but portrait are huge as its the width being fitted, therefore tall and skinny image (portrait) is having its width fit to container thus making it massively tall.
My solution was to think about the container, if in the instance of a portrait image i set the container to be 50% of the landscape container then when i fit the images width (when portrait) to a smaller container i get them proportional (ish).
So wat you want is 2 containers to use, one for portrait and landscape, the landscape one will be the maximum width you want so 450px. Now make your portrait container half a width so 225px (half of the width) if all your images are the same aspect ratio then they should all match nicely and give you a structured grid - or if single column the portrait images will be more or less as tall as the landscape images are wide.
If you want to see this working (for a short time) I'll leave this link up so you can see how i solved it. The example is an email (please don't moan about poor coding, its not finished) template I'm making, where i have a single column of images (its responsive) both portrait and landscape - use a class on the table that contains the portrait image (class=portrait) but this could easily be a div.
http://www.sink140.com/sf-test/single.html
My main point is to stop thinking about trying to control the height, just control the container, let the image fill it, and by adjusting the width of the container (making it smaller) you naturally reduce the height of the image.
Aspect ratio of the images in general will ensure you can predict the layout as you have a baseline of sorts - portrait images relate to the landscape ones.
Hope this helps or at least give you another idea.
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 have a website but when it is loaded it is too big to fit on the screen. If I adjust it to fit on my 17" laptop, when I test it on another laptop it is still big. Is there a property I can set so it is automatically adjusted to fit on the screen so no scrolling bars appear?
You can achieve this by using relative measurements instead of fixed ones.