图片宽度适合浏览器宽度

Question

我只想知道如何调整图像宽度以适合浏览器宽度，该图像基本上是我要适合屏幕宽度的标题图像。

此后，我需要在图像上放置一个div。我目前有以下内容，但似乎无济于事。

    #container {
            position: relative;
  }
        #divWithin {
           position: relative;
           top: 20%;
           left: 20%; 
           padding: 5px;
           background-color: white;
  }
        #imgWithin{
            width: 100vw; 
            height: 100vh;
            left: 0;
  }

<div id="container">
    <img id="imgWithin" src="~/images/image(2).png" style="height:325px; margin-top: 75px;" />
    <div id="divWithin">Testing</div>
</div>

任何帮助或想法都会很高兴

我要实现的目标显示在下图中：

有1个：要在整个屏幕宽度（适合屏幕宽度）上显示的图像

，其中2是：我要在图片上放置的div

Answer 1

要使图像具有响应性，您需要使用以下类：

.responsive {
    width: 100%;
    height: auto;
}

如果您需要有关responsive images的更多详细信息，则此链接应有助于https://www.w3schools.com/howto/howto_css_image_responsive.asp

Answer 2

尝试将CS​​S更改为此：

html, body {
  width: 100%;
}
#container {
  width: 100%;
  position: relative;
}
#imgWithin {
  width: 100%; 
}

#divWithin {
  position: absolute;
  top: 20%;
  left: 20%; 
  padding: 5px;
  background-color: white;
}

这将使图像成为浏览器窗口的全宽，文字覆盖在顶部。

您将在html中以固定的高度扭曲图像。如果您提供的图像链接可以模拟您要实现的目标，那么我也许可以为您提供进一步的帮助

Answer 3

您为什么不使用background: url()？

现在新的html是：

<div id="container">
  <div id="divWithin">Testing</div>
</div>

和CSS：

#container {
    background: url("Your image url") no-repeat center center;
    background-size: cover;
}

详细了解background和background-size

Answer 4

您使用的任何媒体查询都放在哪里

CSS:-
    .container{
    padding: unset;
    width:auto;
    }

我希望容器内的ID是您的图片，如果您在ping我时遇到任何问题，那么在每个屏幕上效果都很好