html - 在 css 中给出宽度 100% 后图像没有响应

Question

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

虽然我给了 width=100%，但上面的 div 标签图像没有响应；在 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 页面的容器，而 slider 是我想让图像响应的 div。当我改变浏览器窗口的大小时，图像没有响应。

Answer 1

width:100% 表示它采用 width of wrapper 而不是浏览器。当您调整浏览器大小时，wrapper 宽度不会调整为浏览器大小。因此，在重新调整窗口大小时，使用 media-queries 更改 wrapper 的大小。因此图像会自动调整大小。

<!-- 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