在 HTML/CSS 中给画布同样的最大高度和宽度

【问题标题】：Giving maximum height and width equally to canvas in HTML/CSS在 HTML/CSS 中给画布同样的最大高度和宽度
【发布时间】：2020-12-30 09:52:45
【问题描述】：

我正在尝试为我的网络应用程序设置布局。我希望有 2 个画布来填充大部分窗口和底部的 4 个图像按钮。 这是我想要达到的目标：

但我在浏览器中搞砸了。画布很小！无论我将潜水的高度或宽度或画布本身放在 CSS 文件中。如果窗口正在调整大小，我希望它们是理想的 800x600 并以相同的比例调整大小。

这是我的 HTML 和 CSS：

body {
  margin: 0;
}

header {
  margin: 0;
  background-color: #DC0A2F;
  height: 50px;
}

header img.logo {
  width: 150px;
  height: auto;
  padding: 13px 13px 0px 13px;
}

header a {
  color: white;
  text-decoration: none;
  float: right;
  padding: 15px;
  font-family: Consolas;
  font-weight: revert;
}

header a:hover {
  padding-top: 16px;
}

html,
body {
  height: 100%;
}

main {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  height: 90vh;
}

main.index {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  color: #888888;
}

main img.menu {
  width: 250px;
  height: auto;
  padding: 50px;
}

table {
  font-size: 130%;
}

th {
  background-color: #888888;
  border-color: white;
}

td {
  background-color: white;
  border-bottom: solid 1px #888888;
  border-right: solid 1px #888888;
}

img.index {
  width: 400px;
  height: auto;
}

.ergebniss {
  margin: 50px;
}

svg.header {
  width: 125px;
  height: 30px;
  margin-top: 10px;
}

.vorschau {
  margin: 100px;
}

canvas{ border: 1px solid black; background-color: red;}

.footPreviewContainer {
  height: 800px;
  text-align: center;
}

#previewWrapper {
  display: table;
  table-layout: fixed;
  width: 100%;
  height: auto;
  background-color: antiquewhite;
}

#previewWrapper div {
  display: table-cell;
  height: auto;
}

#leftCanvas #rightCanvas {
  height: 800px;
  width: 600px;
  border: 1px solid #cccccc;
  background-color: #DC0A2F;
}

.previewButtons {
  text-align: center;
}
<html>

<head>
  <title>WebSocket Echo Client</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <div class="fitToPage" id="canvas"></div>
  <header>
    <img class="logo" src="./content/GUI/logo_weiss.svg" alt="Elten Logo" onclick="goHome();" />
    <a href="#Herunterfahren">Herunterfahren</a>
    <a href="#Neustart">Neustart</a>
  </header>

  <!-- HERE IS THE ISSURE -->

  <div id="previewWrapper" class="footPreviewContainer">
    <canvas id="leftCanvas"></canvas>
    <canvas id="rightCanvas"></canvas>
  </div>

  <div class="previewButtons">
    <img id="actionButtonPreview" class="logo" src="./content/GUI/button_preview.svg" alt="Vermessungsbutton" onclick="initWebSocket();">
    <img id="actionButtonStop" class="logo" src="./content/GUI/button_messen.svg" alt="Vermessungsbutton" onclick="stopWebSocket();">
    <img id="actionButtonMeasure" class="logo" src="./content/GUI/button_messen.svg" alt="Vermessungsbutton" onclick="checkSocket();">
    <img id="actionButtonSendMessage" class="logo" src="./content/GUI/button_messen.svg" alt="Vermessungsbutton" onclick="sendMessage();">
  </div>

</body>

</html>

【问题讨论】：

    标签： javascript html css html5-canvas


    【解决方案1】：

    最简单的解决方案是在预览容器上使用display:flex;，并使用vh（视图高度）单位设置高度。默认值将导致子画布拉伸以填充高度，然后您可以选择如何对齐它们。它们在下面的 sn-p 中设置为justify-content: space-around;，它平均划分子元素两侧的任何可用空间。

    #previewWrapper {
  height: 85vh;
  display: flex;
  justify-content:space-around;
}

canvas {
  width: 46vw;
}


    body {
  margin: 0;
}

header {
  margin: 0;
  background-color: #DC0A2F;
  height: 50px;
}

header img.logo {
  width: 150px;
  height: auto;
  padding: 13px 13px 0px 13px;
}

header a {
  color: white;
  text-decoration: none;
  float: right;
  padding: 15px;
  font-family: Consolas;
  font-weight: revert;
}

header a:hover {
  padding-top: 16px;
}

html,
body {
  height: 100%;
}

main {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  height: 90vh;
}

main.index {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  color: #888888;
}

main img.menu {
  width: 250px;
  height: auto;
  padding: 50px;
}

table {
  font-size: 130%;
}

th {
  background-color: #888888;
  border-color: white;
}

td {
  background-color: white;
  border-bottom: solid 1px #888888;
  border-right: solid 1px #888888;
}

img.index {
  width: 400px;
  height: auto;
}

.ergebniss {
  margin: 50px;
}

svg.header {
  width: 125px;
  height: 30px;
  margin-top: 10px;
}

.vorschau {
  margin: 100px;
}

canvas{ border: 1px solid black; background-color: red;}

.footPreviewContainer {
  height: 800px;
  text-align: center;
}

#previewWrapper {
  height: 85vh;
  display: flex;
  justify-content:space-around;
}

canvas {
  width: 46vw;
 }
    <html>

<head>
  <title>WebSocket Echo Client</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <div class="fitToPage" id="canvas"></div>
  <header>
    <img class="logo" src="./content/GUI/logo_weiss.svg" alt="Elten Logo" onclick="goHome();" />
    <a href="#Herunterfahren">Herunterfahren</a>
    <a href="#Neustart">Neustart</a>
  </header>

  <!-- HERE IS THE ISSURE -->

  <div id="previewWrapper" class="footPreviewContainer">
    <canvas id="leftCanvas"></canvas>
    <canvas id="rightCanvas"></canvas>
  </div>

  <div class="previewButtons">
    <img id="actionButtonPreview" class="logo" src="./content/GUI/button_preview.svg" alt="Vermessungsbutton" onclick="initWebSocket();">
    <img id="actionButtonStop" class="logo" src="./content/GUI/button_messen.svg" alt="Vermessungsbutton" onclick="stopWebSocket();">
    <img id="actionButtonMeasure" class="logo" src="./content/GUI/button_messen.svg" alt="Vermessungsbutton" onclick="checkSocket();">
    <img id="actionButtonSendMessage" class="logo" src="./content/GUI/button_messen.svg" alt="Vermessungsbutton" onclick="sendMessage();">
  </div>

</body>

</html>

    【讨论】：

      【解决方案2】：

      您只需要添加一点 css。我直接将其添加到样式内联中，这样您可以轻松修复它

        <div id="previewWrapper" class="footPreviewContainer" style="display:flex; height:auto; max-height:600px;">
    <canvas id="leftCanvas" style="height:100%;width:800px;"></canvas>
    <canvas id="rightCanvas" style="height:100%;width:800px;"></canvas>
  </div>

      首先要修复previewWrapper的高度。然后画布的宽度。

      body {
  margin: 0;
}

header {
  margin: 0;
  background-color: #DC0A2F;
  height: 50px;
}

header img.logo {
  width: 150px;
  height: auto;
  padding: 13px 13px 0px 13px;
}

header a {
  color: white;
  text-decoration: none;
  float: right;
  padding: 15px;
  font-family: Consolas;
  font-weight: revert;
}

header a:hover {
  padding-top: 16px;
}

html,
body {
  height: 100%;
}

main {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  height: 90vh;
}

main.index {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  color: #888888;
}

main img.menu {
  width: 250px;
  height: auto;
  padding: 50px;
}

table {
  font-size: 130%;
}

th {
  background-color: #888888;
  border-color: white;
}

td {
  background-color: white;
  border-bottom: solid 1px #888888;
  border-right: solid 1px #888888;
}

img.index {
  width: 400px;
  height: auto;
}

.ergebniss {
  margin: 50px;
}

svg.header {
  width: 125px;
  height: 30px;
  margin-top: 10px;
}

.vorschau {
  margin: 100px;
}

canvas{ border: 1px solid black; background-color: red;}

.footPreviewContainer {
  height: 800px;
  text-align: center;
}

#previewWrapper {
  display: table;
  table-layout: fixed;
  width: 100%;
  height: auto;
  background-color: antiquewhite;
}

#previewWrapper div {
  display: table-cell;
  height: auto;
}

#leftCanvas #rightCanvas {
  height: 800px;
  width: 600px;
  border: 1px solid #cccccc;
  background-color: #DC0A2F;
}

.previewButtons {
  text-align: center;
}
      <html>

<head>
  <title>WebSocket Echo Client</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <div class="fitToPage" id="canvas"></div>
  <header>
    <img class="logo" src="./content/GUI/logo_weiss.svg" alt="Elten Logo" onclick="goHome();" />
    <a href="#Herunterfahren">Herunterfahren</a>
    <a href="#Neustart">Neustart</a>
  </header>

  <!-- HERE IS THE ISSURE -->

  <div id="previewWrapper" class="footPreviewContainer" style="display:flex; height:auto; max-height:600px;">
    <canvas id="leftCanvas" style="height:100%;width:800px;"></canvas>
    <canvas id="rightCanvas" style="height:100%;width:800px;"></canvas>
  </div>

  <div class="previewButtons">
    <img id="actionButtonPreview" class="logo" src="./content/GUI/button_preview.svg" alt="Vermessungsbutton" onclick="initWebSocket();">
    <img id="actionButtonStop" class="logo" src="./content/GUI/button_messen.svg" alt="Vermessungsbutton" onclick="stopWebSocket();">
    <img id="actionButtonMeasure" class="logo" src="./content/GUI/button_messen.svg" alt="Vermessungsbutton" onclick="checkSocket();">
    <img id="actionButtonSendMessage" class="logo" src="./content/GUI/button_messen.svg" alt="Vermessungsbutton" onclick="sendMessage();">
  </div>

</body>

</html>

      【讨论】：

        猜你喜欢
        • 1970-01-01
        • 2014-02-27
        • 1970-01-01
        • 2014-10-30
        • 2012-12-30
        • 2013-02-16
        • 2018-09-27
        • 1970-01-01
        • 2011-11-03
        相关资源
        最近更新 更多
        热门标签
        Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode