Best IT Recipes

Automatically resize images with browser size using CSS

I want all (or only some) of my images to automatically resize when my browser window is resized. I found the following code - it does nothing.

HTML

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="style.css" type="text/css" media="screen" /> </head> <body> <div id="icons"> <div id="contact"> <img src="img/icon_contact.png" alt="" /> </div> <img src="img/icon_links.png" alt="" /> </div> </body> </html>

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 full-screen design (with background-size: cover ) and have div elements in exactly the same position (% wise) when resizing the browser window with their size and resizing (like cover for the background)?

+44
css resize responsive-design
Apr 25 '13 at 14:23
source share
4 answers

To make the images flexible, just add max-width:100% and height:auto . The image max-width:100% and height:auto works in IE7, but not in IE8 (yes, another strange 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

eg:

 img { max-width: 100%; height: auto; width: auto\9; /* ie8 */ }

and then any images you add simply with the img tag will be flexible

JSFiddle example here No JavaScript needed. Works in the latest versions of Chrome, Firefox and IE (that's all I tested).

+112
Apr 25 '13 at 14:25
source share

image container

Scaling images using the above trick only works if the container resizes the images.

The #icons container uses px values ​​for width and height. The px values ​​do not scale when the browser is resized.

Solutions

Use one of the following methods:

  • Determine the width and / or height using the % values.
  • Use the @media series of queries to set the width and height for different values ​​depending on the current screen size.
+3
Apr 25 '13 at 14:41
source share

This may be an oversimplified answer (I'm still new here), but what I did in the past to fix this is the percentage of the screen that I would like to draw attention to. For example, there is one webpage I'm working on, where the logo should occupy 30% of the screen size in order to look better. I played and finally tried this code and it has worked for me so far:

 img { width:30%; height:auto; }

In this case, all your images will be changed by 30% of the screen size. To work around this problem, just make this class and apply it to the image you want to be 30% directly on. Here is an example of the code I wrote to execute this on the above site:

CSS part:

 .logo { position:absolute; right:25%; top:0px; width:30%; height:auto; }

HTML part:

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

Alternatively, you can put any image that you hope will automatically resize to a separate div and use the class tag parameter for each div (now creating class tags when necessary), but I feel that it will cause a lot of extra work in the end. But, if the site requires it: the site requires it.

Hope this helps. Excellent day!

+1
Nov 15 '15 at 14:26
source share

The following works in all browsers for my 200 digits, for any percentage of the width - even though it's illegal. Yucca said: "Use it anyway." (The class simply moves the image left or right and sets the margins.) I cannot imagine why this is not a standard approach!

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

Change the window width and image scaling.

0
Jul 12 '17 at 18:21
source share


More articles:


All Articles