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

Posted 2023-05-09

【中文标题】在 css 中给定宽度 100% 后图像没有响应

【英文标题】：Image is not responsive after giving width 100% in css

【发布时间】：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

【参考方案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