Question

我正在尝试将此示例图像的宽度设置为紫色背景“#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>

CSS：

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

li {
    list-style: none;
}

.gallery li img {
    width: 100%;
}

Answer 1

要使width: 100%生效，必须事先定义父元素的宽度。您的<li>元素很可能不是这种情况。

我相信您的实际问题是<ul>元素上的填充会阻止您的图片占据整个宽度。尝试向其添加padding-left:0;。

Answer 2

您需要清除ul的默认边距和填充，方法是将其设置为0，并将图像宽度更改为max-width: 100%。

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

ul{
  padding:0;
  margin:0;
}

li {
  list-style: none;
}

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

将图像的宽度设置为其父级父级的父级

2 个答案: