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

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:

<img src="logo_001_002.png" class="logo">

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

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    lt img class  fl  width  66   src  A-Images 0 5 Saltation jpg  alt  Schematic models of chromosomes        gt    Change the window width and the image scales obligingly

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