<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。当我改变浏览器窗口图像的大小时没有响应。
答案 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;
}
}