CODEWITHSUNDEEP
javascriptjqueryimage-resizing
Kislay
Kislay

Reputation: 9

how to resize image as we resize browser window

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

Upvotes: 0

Views: 317

Answers (3)

Shrey Gupta
Shrey Gupta

Reputation: 5617

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:

Upvotes: 1

SoftwareAndOutsourcing
SoftwareAndOutsourcing

Reputation: 140

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.

Upvotes: 1

isJustMe
isJustMe

Reputation: 5470

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

Upvotes: 1

Related Questions