Html 将图像的宽度设置为其父级'；s的父母'；父母_Html_Css_Width

Html 将图像的宽度设置为其父级'；s的父母'；父母

html css

Html 将图像的宽度设置为其父级'；s的父母'；父母,html,css,width,Html,Css,Width,我正在尝试将此示例图像的宽度设置为紫色背景“#container”div宽度的100%，即使页面已重新调整大小。它的结构是这样的，因为其他原因，我认为我不能四处走动。这似乎应该是一个简单的解决方案，但我似乎找不到答案 HTML： <html> <head> <title>Sample Title</title> <link rel="stylesheet" type="text/css" href="s

我正在尝试将此示例图像的宽度设置为紫色背景“#container”div宽度的100%，即使页面已重新调整大小。它的结构是这样的，因为其他原因，我认为我不能四处走动。这似乎应该是一个简单的解决方案，但我似乎找不到答案

HTML：

<html>
    <head>
        <title>Sample Title</title>
        <link rel="stylesheet" type="text/css" href="style.css"/>
        <meta name="viewport" content="width=device-width">
    </head>
    <body>
        <div id="container">
            <div class="media">
                <ul class="gallery" id="house1">
                    <li><img src="https://analogphotogs.files.wordpress.com/2011/05/lc-w_sample_01.jpg"></li>
                </div>
            </div>
        </div>
    </body>
</html>

要使

width:100%

生效，必须事先定义父元素的宽度。您的

元素很可能不是这种情况

我相信您的实际问题是

元素上的填充阻止了图像占据整个宽度。尝试添加

左填充：0到它。
您需要清除ul
的默认边距和填充，方法是将其设置为0，并将图像宽度更改为最大宽度：100%

#container {
  width: 50vw;
  height: 50vw;
  background-color: purple;
}

ul{
  padding:0;
  margin:0;
}

li {
  list-style: none;
}

.gallery li img {
  max-width: 100%;
}

我将CSS更改为包含：.gallery li{width:100%；}仍然无法工作，因此我是否尝试使图像将div视为其父级？jQuery？这是元素上的填充。这就是我的问题所在！谢谢我想我在清理所有填充物时错过了其中一个。这正是我现在所希望的
#container {
  width: 50vw;
  height: 50vw;
  background-color: purple;
}

ul{
  padding:0;
  margin:0;
}

li {
  list-style: none;
}

.gallery li img {
  max-width: 100%;
}