在css中给出宽度100%后,图像无响应

时间:2014-06-16 06:45:39

标签: html css

<div id="Slider">
    <img class="img1" src="Images/pic04.jpg" ></img>
</div>

在上面的div标签中,虽然我给出宽度= 100%,但图像没有响应;在css 下面是整个css

body {
    margin:0;
    padding:0;
    font-size: 13pt;
    line-height: 1.75em;
    letter-spacing: 0.015em;
    font-family:Comic Sans, Comic Sans MS, cursive;
}
* {
    margin:0;
    padding:0;
}
#wrapper {
    border:1px solid;
    width:1100px;
    margin:auto;
}
#Slider {
    clear:both;
    float:left;
    width:100%;
}
.img1 {
    width:100%;
}

在上面#wrapper是Html页面的容器,滑块是我想要使图像响应的div。当我改变浏览器窗口图像的大小时没有响应。

1 个答案:

答案 0 :(得分:0)

width:100%表示width of wrapper不是浏览器。当您重新调整浏览器大小时,wrapper宽度将不会re-size to browser size。所以在重新调整窗口大小时使用wrapper更改media-queries的大小。所以图像会自动重新调整大小。

<!-- CSS media query on a link element -->
<link rel="stylesheet" media="(max-width: 600px)" href="example.css" />

<!-- CSS media query within a example.css -->

@media (max-width: 600px) {
  #wrapper{
    width: 700px;
  }
}

Media-Queries