使用CSS自动调整图片浏览器的大小
当我调整浏览器窗口大小时，我希望自动调整图像的大小（或仅仅是一些）。 我发现了下面的代码 – 虽然没有做任何事情。
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; }
我怎么能基本上有一个全屏devise（与background-size: cover ），并在调整浏览器窗口的大小时， div元素在完全相同的位置（％明智），他们的大小也resize（如cover正在做的背景） ？
为了使图像更灵活，只需添加
max-width:100%和height:auto。 图像max-width:100%和height:auto在IE7中，但不是在IE8（是的，另一个奇怪的IE错误）。 要解决这个问题，你需要为IE8添加width:auto\9。来源： http : //webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries
例如 ：
img { max-width: 100%; height: auto; width: auto\9; /* ie8 */ }
然后只需使用img标签添加的任何图像都将是灵活的
JSFiddle的例子在这里。 不需要JavaScript。 适用于最新版本的Chrome，Firefox和IE（这是我testing过的）。
图像容器
使用上述技巧缩放图像仅适用于图像所在的容器更改大小。
#icons容器使用px值作为宽度和高度。 调整浏览器大小时， px值不会缩放。
解决scheme
使用以下方法之一：
- 使用
%值定义宽度和/或高度。 - 根据当前屏幕大小，使用一系列
@media查询将宽度和高度设置为不同的值。
这个答案可能太简单了（我在这里还是个新手），但是我过去为了解决这个问题所做的工作，已经找出了我希望图像所占的比例。 例如，我正在使用一个网页，其中标志必须占据屏幕尺寸的30％才能看上去最好。 我玩了，终于尝试了这个代码，它迄今为止工作：
img { width:30%; height:auto; }
这就是说，这会将您的所有图像始终变为屏幕大小的30％。 为了解决这个问题，只需将它作为一个类，并将其应用到您希望直接显示为30％的图像。 下面是我在前面提到的网站上写的代码示例：
CSS部分：
.logo { position:absolute; right:25%; top:0px; width:30%; height:auto; }
HTML部分：
<img src="logo_001_002.png" class="logo">
或者，你可以放置任何图像，你希望自动resize到自己的div，并使用每个div的类标签选项（现在创build类标签，只要需要），但我觉得这将导致大量额外的工作。 但是，如果网站要求：网站要求它。
希望这有助于。 祝你有美好的一天！
以下在所有浏览器上适用于我的200个数字，任何宽度百分比 – 尽pipe是非法的。 Jukka说：“无论如何使用它”。 （该类只是向左或向右漂浮图像，并设置边距。）我无法想象为什么这不是标准的方法！
<img class="fl" width="66%" src="A-Images/0.5_Saltation.jpg" alt="Schematic models of chromosomes ..." />
改变窗口的宽度和图像的比例。
