在 css 中给定宽度 100% 后图像没有响应答案

【问题标题】：Image is not responsive after giving width 100% in css在 css 中给定宽度 100% 后图像没有响应
【发布时间】：2014-08-05 22:32:53
【问题描述】：

<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。当我更改浏览器窗口的大小时，图像没有响应。

【问题讨论】：

你能做JSfiddle吗？
一切正常：jsfiddle.net/lotusgodkk/GCu2D/178。调整结果容器的大小，图像会相应地自行调整
很可能您的父 div Slider 未设置为您期望的宽度。
@KamleshKushwaha：如果我发布整个 Html 文件，它在系统中不起作用
贴出可能影响div的css的相关html和css

标签： html css

【解决方案1】：

width:100% 表示它需要width of wrapper 而不是浏览器。当您重新调整浏览器的大小时，wrapper 的宽度将不会是 re-size to browser size。所以在重新调整窗口大小时使用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

【讨论】：