can anybody tell me how to resize image as we resize browser like it is done in https://login.microsoftonline.com/
I have tried it with css approach using media query. But I want to resize image on the fly like Microsoft have done. This is what I did http://codoc.testdrive.ch/Intranet
Check out this great resource so you can understand how it works.
You have several alternatives without using Javascript, such as setting the image to 100%.
img{
width: 100%;
}
Here is a demo you will see how the image gets larger or smaller depending on how you resize the window
You can also check this demo
Use the resize event as describe in (plain Javascript) JavaScript window resize event or (jQuery) How can I detect window size with jQuery?. Then set the image size you want.
The effect where the picture decreases in size can be done very simply in CSS without using any JavaScript:
#image_id{
width: 100%
}
What Microsoft has done is implement a "responsive design." This means that the design is both "fluid" and "adaptive."
"Fluid" refers to the fact that the image changes in size as the screen becomes smaller.
"Adaptive" refers to the fact that the image disappears when the screen becomes too small. (The layout of the page changes.)
The Fluid part can be achieved using the code I have above. However, the Adaptive part will require media queries, like you did. Combine the two, and you get the effect Microsoft has.
Here's some more quick information on Responsive designs for you:
Youtube video: http://www.youtube.com/watch?v=T6MCkGWSXa0 (1:29 long)
Live examples: http://liquidapsive.com/
More live examples: http://bradfrost.github.com/this-is-responsive/
Related
I am creating a photo site - I uploaded a photo of myself which is actually incorrectly oriented (the image is rotated 90 degrees counter clockwise). I have uploaded this image from my iPhone, which apparently has the image stored this way on purpose.
On my site, the HTML page has rendered a JSON object that contains the URL to the photo as well as the image dimensions. I am using jQuery mobile - and onload of the page I put a link on the page, and when you click the photo it displays the photo as a popup. The popup renders an <img> tag with dimensions that are small enough to fit the image within the current viewport width/height. It calculates the dimensions using the JSON I previously mentioned, and the results from $(window).width() and $(window).height().
On desktop - the photo correctly displays in the wrong orientation (because that is how the photo is actually stored).
On iPad & iPhone - the photo is auto-rotated so the photo is correctly oriented, but the dimensions are all wrong so the photo is all stretched out and distorted.
I would like to know the following:
Is this a commonly known feature of browsers on iOS or other devices?
Is there a way to disable this functionality using CSS or Javascript?
Is there a way to detect that it happened and correct the dimensions of the <img> tag? I don't mind that the photo's orientation was corrected by the browser, I just want the dimensions to be proper.
EDITS
Making the Title more in the form of a question - Also reformulating the question to be more direct
MORE EDITS
Here is a JS Fiddle with an example: http://jsfiddle.net/5JKgn/
If you click the link on a desktop computer, the popup shows the image improperly oriented. If you click the link on an iPhone or iPad, the popup shows the image properly oriented, but the dimensions are wrong so the photo is stretched.
In the real scenario, the JSON is rendered by PHP code which can read the image and outputs the width height from what it gets using getimagesize()
OK I'll try to answer this one:
Yes that's on purpose iOS stores the display-orientation in the EXIF data (among things like resolution, shutter, GPS etc.) but saves the image data in device-orientation.
For more info on EXIF see Wikipedia.
Not that I know of.
Yes, you should be able to access the EXIF data and determine orientation and dimensions.
Nr. 3 needs a little more explanation:
You could use a library like this one to access the EXIF data from javascript (includes jQuery plugin).
The Orientation Tag is defined as: 0x0112 : "Orientation" and stored as a number.
Using that information you can determine the orientation:
Value | Orientation
------|----------------------
1 | horizontal (normal)
2 | flip horizontal
3 | rotate 180°*
4 | flip vertical
5 | transpose
6 | rotate 90°*
7 | transverse
8 | rotate 270°*
* rotation is counter clockwise
That should enable you to at least swap width / height for your <img> if need.
Please not that the EXIF data also includes the width and height so if they differ from what you think they should be that could also help to identify rotation issues.
To formalize my comments - perhaps you can just sidestep the issue:
If you don't need to store exact originals, you could rotate the data when storing/retrieving the image.
Or, as the OP noted in response, just remove the EXIF tag, and browsers will no longer be able to use it for 'fixing' the orientation.
(p.s. Always remember to ask 'why' enough times to figure out what problem you're actually trying to solve :D)
You don't need to us Javascript to explicitly set the height/width of the image on load. Remove the part of your script that's inserting those inline height/width styles and just add the following to your stylesheet:
.ui-popup-container {
width: calc(100% - 40px); /* simulates a 20px margin */
}
.ui-popup-container img {
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
}
Here's an updated Fiddle
Use media queries for desktop browsers and set the css for the images to 100% height and auto width.
#media (min-width: 900px)
{
img {width:auto; height:100%;}
}
You may even consider using these variables instead of calculating them for the mobile site
The short question:
I have a simple monitor and a projector, both should show the same browser window with the same page loaded, but with some different content for each of them. Is there any way to achive this with css or js (or maybe with a specific browser extension)?
Longer explanation:
I want to build a little presentation plugin with js and css, and the biggest presentation programs all have a timer on the screen, but not on the projector. This feature is something I want to realise. Notes or something like that could also be added, but all that requires different content on different screens/projectors, so I need a solution for that. For this even a browser extension would be useful because I only want the plugin for myself.
So, do you have any suggestions?
You can specify different media. Like this:
#media projection{
//projection css
}
#media screen{
//screen css
}
Then, obviously, the projection ones will apply to projection media, like slides, projectors, etc, and the screen stuff will only apply to a computer screen. Now, you may want to toy around with the projection css, as I've never actually tested it. But you could easily get away with just using the screen stuff to set certain stuff to display:block;, while it is display:none; otherwise.
I guess you can use media queries for that in CSS3.
See thinkvitamin.com for example, resize your window and see how it is arranging the UI according to the screen size.
You can also hide or show divs at a particular screen resolution, but I think that this will work only in CSS3.
I'm working on my first responsive website and I want to know how to make all of the images resize dynamically. I've worked around it for now, but I'd really like to rethink how I did this. Is there a jquery plugin for this that is easy to implement (I don't know alot of js)? Is there a better way?
My site
You actually don't need any js for this - this could be achieved with CSS alone. As you figured out from looking at the source in the link in your comments, all that's needed for dynamically resizing an image is the max-width property set to 100%. However, if you want the image to increase in size dynamically as well then you'll have to use width:100%.
See the example in this jsFiddle. You'll notice max-width does not go past the image's resolution - on the otherhand width ensures the image fills the container (which some see as a disadvantage because they lose the resolution when the width exceeds it's original).
There is a catch though, max-width property is not supported in IE6 or below - it was only introduced in IE7. This article here provides a workaround for that though.
But resizing an image through css doesn't make an image responsive.
A 200 kb image will be 200 kb when it is 1000 px wide but also when it is resized by css to 50 px wide.
I would like to see you guys' faces when waiting untill that large images is loaded on your smartphone
Can you resize images to be fullscreen with javascript in the same way you can with flash?
Ive found this link but its for an entire plugin with slideshow, etc not just the feature I need for a more custom design:
http://buildinternet.com/project/supersized/
And this plugin seems to only with with background images:
http://www.ajaxblender.com/bgstretcher-2-jquery-stretch-background-plugin-updated.html
Ideally id like to do this with jQuery.
Thanks
Here's an example of a basic implementation. It accounts for resizing of the window, but doesn't account for any focus point of the image and so the focus point could fall out of view for oddly-sized windows.
http://jsbin.com/okizi5
Edit: I forgot to point that that the width/height attributes on the image are necessary in this version for all browsers (notably Safari) to calculate the aspect ratio of the image. If your image is to be dynamic and the dimensions are not available then these could be calculated within the 'load' function bound to the window.
Yes. I don't see why you can't, really. You can use JavaScript, and its DOM interface, to modify the style properties of an image to resize an image. You don't even need a heavy library like jQuery; it's all native.
How about this:
$(window).resize(function() {
$('#myImgId').width($(window).width());
$('#myImgId').height($(window).height());
});
It will not maintain the aspect ratio...
galleria javascript crops top and base of images when viewing in Firefox Chrome and IE
However in Safari this issue does not exist.
Please see the issue here
http://galleria.aino.se/media/galleria/src/themes/fullscreen/fullscreen-demo.html
no compare the squirrel image with its original
right click on any image and you will see how the script is not displaying the the full image.
We are using galleria. js full screen for a wordpress theme and all our images are the same size so there is no height issue the images we will use are 1600x900
If any one can help please advise. We need to display the entire image.
Thanks all.
I believe that's how galleria is supposed to behave. In full screen mode it fills the screen, so it will crop the top or sides, whichever extends beyond the aspect ratio of the browser window.
In full-screen mode, if you have a wide browser window, it'll crop the top/bottom. If you resize the browser window to portrait orientation, it'll crop the left/right.
You can control this behavior using the image_crop option.
F.ex if you want the image to always fit, set this to false.
Try to set in your css:
.galleria-image img {max-width:6000px !important;}
this works for me, I think there is some trouble in Safari with the attribute max-width of the image. You could use this simple trick or improve this technique adding some conditional css, so for example setting max-width to a specific value only when option "imageCrop" of galleria is set to true. Let me know if this works also for you!