0

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

Kislay
  • 9
  • 1
  • Microsoft page uses, document `resize` event & setting the image `width` & `height` according to the current window `height` & `width`. And your `testdrive` code is not accessible from INDIA it seems :-) –  Jun 19 '13 at 04:30

3 Answers3

1

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.

Community
  • 1
  • 1
SoftwareAndOutsourcing
  • 140
  • 11
1

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

isJustMe
  • 5,364
  • 1
  • 28
  • 44
1

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:

Shrey Gupta
  • 5,053
  • 6
  • 40
  • 68