Automatically resize images with browser size using CSS

Question

I want all  or just some  of my images getting resized automatically when I resize my browser window  I ve found the following code - it doesn t do anything though   HTML   lt  DOCTYPE html gt   lt html lang  en  gt       lt head gt           lt meta charset  utf-8    gt           lt meta name  viewport  content  width device-width  initial-scale 1 0    gt           lt link rel  stylesheet  href  style css  type  text css  media  screen    gt       lt  head gt       lt body gt           lt div id  icons  gt               lt div id  contact  gt                   lt img src  img icon contact png  alt      gt               lt  div gt               lt img src  img icon links png  alt      gt           lt  div gt       lt  body gt   lt  html gt    CSS  body       font-family  Arial      font-size  11px      color   ffffff      background   202020 url       img body back jpg  no-repeat top center fixed      background-size  cover      icons       position  absolute      bottom  22       right  8       width  400px      height  80px      z-index  8      transform  rotate -57deg        -ms-transform  rotate -57deg        -webkit-transform  rotate -57deg        -moz-transform  rotate -57deg       contact        float  left       cursor  pointer       img        max-width  100        height  auto       How can I basically have a fullscreen design  with background-size  cover  and have div elements be at exactly the same position    wise  when resizing the browser window  with their size also resizing  like cover is doing for the background

User · Answer

The following works on all browsers for my 200 figures, for any width percentage -- despite being illegal. Jukka said 'Use it anyway.' (The class just floats the image left or right and sets margins.) I can't imagine why this isn't the standard approach!

<img class="fl" width="66%"
src="A-Images/0.5_Saltation.jpg"
alt="Schematic models of chromosomes ..." />

Change the window width and the image scales obligingly.

User · Answer

This may be too simplistic of an answer  I am still new here   but what I have done in the past to remedy this situation is figured out the percentage of the screen I would like the image to take up   For example  there is one webpage I am working on where the logo must take up 30  of the screen size to look best   I played around and finally tried this code and it has worked for me thus far   img   width 30   height auto      That being said  this will change all of your images to be 30  of the screen size at all times   To get around this issue  simply make this a class and apply it to the image that you desire to be at 30  directly   Here is an example of the code I wrote to accomplish this on the aforementioned site   the CSS portion    logo   position absolute  right 25   top 0px  width 30   height auto      the HTML portion    lt img src  logo 001 002 png  class  logo  gt    Alternatively  you could place ever image you hope to automatically resize into a div of its own and use the class tag option on each div  creating now class tags whenever needed   but I feel like that would cause a lot of extra work eventually   But  if the site calls for it  the site calls for it   Hopefully this helps   Have a great day

User · Answer

image container  Scaling images using the above trick only works if the container the images are in changes size   The  icons container uses px values for the width and height  px values don t scale when the browser is resized   Solutions  Use one of the following approaches    Define the width and or height using   values  Use a series of  media queries to set the width and height to different values based on the current screen size

User · Answer

To make the images flexible  simply add max-width 100  and   height auto  Image max-width 100  and height auto works in IE7    but not in IE8  yes  another weird IE bug   To fix this  you need to   add width auto 9 for IE8       source    http   webdesignerwall com tutorials responsive-design-with-css3-media-queries   for example    img       max-width  100       height  auto      width  auto 9     ie8        and then any images you add simply using the img tag will be flexible  JSFiddle example here  No JavaScript required  Works in latest versions of Chrome  Firefox and IE  which is all I ve tested

[css] Automatically resize images with browser size using CSS

Examples related to css

Examples related to resize

Examples related to responsive-design