我正在努力让我的学校项目的网站对移动设备友好,但我不想让用户通过向左或向右滚动来查看图像.我希望图像的最大宽度的值与用户屏幕的宽度相同.(当使用移动设备时)

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;
}

超文本标记语言

<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类中使用Percent属性,如下所示:

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

如果只在移动设备上,你可以使用媒体查询:

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

编辑:基于新代码,并用随机图像表示.

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


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

header img{
  display:flex;
  width: 100%;
  height: 100%;
}
<header>
    <h1 class="hidden">Welcome to caillou.tk!</h1>
    <a href="/"><img src="https://www.intz.com.br/wp-content/uploads/wallpapers/WallpaperLiquifyUltraWide.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>

Javascript相关问答推荐

为什么!逗号和空格不会作为输出返回,如果它在参数上?

setcallback是什么时候放到macrotask队列上的?

无法使用单击按钮时的useState将数据从一个页面传递到另一个页面

如何在ASP.NET中使用Google Charts API JavaScript将条形图标签显示为绝对值而不是负值

如何防止ionic 输入中的特殊字符.?

JS Animate()方法未按预期工作

FileReader()不能处理Firefox和GiB文件

是否设置以JavaScript为背景的画布元素?

需要RTK-在ReactJS中查询多个组件的Mutations 数据

如何使用fltter_js将对象作为参数传递给javascrip?

如何在不将整个文件加载到内存的情况下,在Node.js中实现Unix粘贴命令?

相对于具有选定类的不同SVG组放置自定义工具提示

已在EventListener中更新/更改异步的React.js状态对象,但不会导致组件重新呈现

响应,Use Callback更新状态变量,该变量也存在于其依赖数组中,它如何防止无限重新呈现?

使用Firebase实时数据库`update`在同一 node 上执行多个更新

如何在Flat Pickr中更改取消选中日期的 colored颜色

如何使用逗号JS从数组中输出数据列表?

在继续循环之前,请等待带有异步调用的函数完成

Electron -如何指向ASAR生成的应用程序之外的路径

智能合同与Ether.js的集成