javascript - 图像缩放大小取决于浏览器大小

Question

以本站为例：http ://www.reebok.com/en-GB/

标题 div 高度根据浏览器的大小进行调整，内部内容具有 100% 的高度和宽度。

这是由javascript控制的吗？这只能用CSS来完成吗？

Answer 1

你只能在 html & css 的帮助下做到这一点。像这样写：

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

检查这个http://jsfiddle.net/e8V47/

Answer 2

在您的页面中，实际上使用的是 Javascript。

容器的高度被内联修改（style属性）

<div class="module module-hero use-full-width displayed" data-module="Hero" style="height: 232px;">

然而，可以用 CSS 做类似的事情，使用%高度。例如 ：

.module{
   height:40%;        // A percentage relative to the parent element
}

Answer 3

您的示例中的图像是由浏览器调整的，它在 中，如果您只设置宽度或高度，浏览器会自动调整另一个。