CSS：要调整大小并动态调整浏览器宽度的图像宽度

Question

我已经制作了一个代码来调整大小并动态地将图像的宽度设置为浏览器的宽度，所以我在css中设置了以下代码

max-width: 100%; 
  height: auto;

我的挑战是图像永远不会动态调整大小以动态占据浏览器的整个屏幕宽度。 这是我制作的Plnker http://plnkr.co/edit/j6JBCaKBmVQV1PDAh3dZ?p=preview 可能有什么不对。

Answer 1

将width更改为max-width。

从命名中可以明显看出，<img src="http://lorempixel.com/400/200/" alt=""> 仅作为上限。它没有做任何更大的东西，它只是缩小了尺寸，如果它们已经比你指定的更大。

示例：http://jsfiddle.net/b18axhzg/

HTML：

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

CSS：

<meta name = "viewport" content = "width=device-width; initial-scale = 1; maximum-scale=1; user-scalable = no;" />

Answer 2

如果父母变得太小，要使其黯然失色：

display: block;
max-width: 100%; 
height: auto;

强迫它占据整体：

display: block;
width: 100%; 
height: auto;

Answer 3

使用img。

属性

CSS：

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

或最大宽度：100％; 它将自动变得可调整。

Answer 4

更改max-width：100％;宽度：100％