css 如何使图像宽度与屏幕宽度相同

v440hwme 于 2022-12-05 发布在其他

关注(0)|答案(4)|浏览(276)

我试图使我的学校项目的网站移动友好，但我不希望用户滚动左或右看到图像。我希望图像的最大宽度的值是相同的用户屏幕的宽度。（当在移动）
CSS

html, body {
  height: 100%;
  width: 100%;
  margin: 0;
}

header{
  margin: 0 auto;
  justify-content: center;
  width: 519px;
  height: 200px;
}

header img{
  width: 519px;
  height: 200px;
}

HTML语言

<header>
    <h1 class="hidden">Welcome to caillou.tk!</h1>
    <a href="/"><img src="img/k.png" alt="Caillou Logo"></a>

  </header>
  <nav>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="https://www.youtube.com/channel/UC4yQCVlLhTmOqX5kUkAGr0g">Watch</a></li>
      <li><a href="characters">Characters</a></li>
      <li><a href="about">About Caillou</a></li>
      <li><a href="credits">Credits</a></li>
    </ul>
  </nav>

是的，这是一个关于Caillou的网站，我也有一个学校项目

css

来源：https://stackoverflow.com/questions/74680152/how-to-make-an-image-width-the-same-as-the-screen-width

4条答案

按热度按时间

zc0qhyus1#

我建议在css类中使用percentage属性，例如：

img {
    width: 100%;
    height: 100%;
}

如果它只在移动设备上，你可以使用媒体查询：

@media screen and (min-width: 992px) {
   img {
    width: 100%;
    height: 100%;
  }
}

编辑：基于新代码，用随机图片表示。
第一次

赞(0）回复(0）举报 2022-12-05

ogq8wdun2#

如果是背景图像，则可以使用以下CSS：

#image {
    min-width: 100vw;
    min-height: 100vh;
    overflow: hidden;
}

溢出将被切断，这样用户就不能滚动了。（假设image是你的图像的id）

赞(0）回复(0）举报 2022-12-05

ds97pgxw3#

您可以使用：

img {
  width: 100vw;
}

赞(0）回复(0）举报 2022-12-05

gr8qqesn4#

使用百分比宽度

img {
   width: 100%;
   height: 100%;
}

赞(0）回复(0）举报 2022-12-05

我来回答

css 如何使图像宽度与屏幕宽度相同

4条答案

相关问题

热门标签

最新问答