height 相关问题

确定Y轴上对象大小的属性。请不要使用此标记，它在您的帖子中没有分类值。

使用 CSS 时画布会被拉伸，但使用 `width` 和 `height` 属性时则正常

我有 2 个画布，一个使用 HTML 属性宽度和高度来调整大小，另一个使用 CSS：我有 2 个画布，一个使用 HTML 属性 width 和 height 来调整大小，另一个使用 CSS: <canvas id="compteur1" width="300" height="300" onmousedown="compteurClick(this.id);"></canvas> <canvas id="compteur2" style="width: 300px; height: 300px;" onmousedown="compteurClick(this.id);"></canvas> Compteur1 按其应有的方式显示，但 compteur2 不显示。内容是使用 JavaScript 在 300x300 画布上绘制的。为什么会有显示差异？看起来 width 和 height 属性决定了画布坐标系的宽度或高度，而 CSS 属性只决定了显示它的框的大小。这在 HTML 规范中进行了解释： canvas元素有两个属性来控制元素位图的大小：width和height。这些属性在指定时必须具有“有效的非负整数”值。必须使用解析非负整数的规则来获取它们的数值。如果缺少某个属性，或者解析其值返回错误，则必须使用默认值。 width 属性默认为 300，height 属性默认为 150。要在画布上设置 width 和 height，您可以使用：canvasObject.setAttribute('width', '150'); canvasObject.setAttribute('height', '300'); 对于 <canvas> 元素，width 和 height 的 CSS 规则设置将绘制到页面的画布元素的实际大小。另一方面， width 和 height 的 HTML 属性设置画布 API 将使用的坐标系或“网格”的大小。例如，考虑这个（jsfiddle）： var ctx = document.getElementById('canvas1').getContext('2d'); ctx.fillStyle = "red"; ctx.fillRect(10, 10, 30, 30); var ctx2 = document.getElementById('canvas2').getContext('2d'); ctx2.fillStyle = "red"; ctx2.fillRect(10, 10, 30, 30); canvas { border: 1px solid black; } <canvas id="canvas1" style="width: 50px; height: 100px;" height="50" width="100"></canvas> <canvas id="canvas2" style="width: 100px; height: 100px;" height="50" width="100"></canvas> 两者都相对于画布元素的内部坐标绘制了相同的东西。但在第二个画布中，红色矩形的宽度将是原来的两倍，因为 CSS 规则将整个画布拉伸到更大的区域。注意：如果未指定 width 和/或 height 的 CSS 规则，则浏览器将使用 HTML 属性来调整元素的大小，以使这些值的 1 个单位等于页面上的 1px。如果未指定这些属性，则它们将默认为 width 为 300 和 height 为 150。如果您在 CSS 中设置宽度和高度，画布将被拉伸。如果你想动态操纵画布的尺寸，你必须使用 JavaScript，如下所示： canvas = document.getElementById('canv'); canvas.setAttribute('width', '438'); canvas.setAttribute('height', '462'); Shannimal修正 var el = $('#mycanvas'); el.attr('width', parseInt(el.css('width'))) el.attr('height', parseInt(el.css('height'))) Canvas 通过缓冲区渲染图像，因此当您指定宽度和高度 HTML 属性时，缓冲区的大小和长度会发生变化，但当您使用 CSS 时，缓冲区的大小不会改变。使图像拉伸。使用 HTML 调整大小。画布大小更改 -> 缓冲区大小更改 -> 渲染使用 CSS 调整大小画布大小已更改 -> 渲染由于缓冲区长度保持不变，当上下文渲染图像时，图像显示在调整大小的画布中（但在未更改的缓冲区中渲染）。 CSS 设置画布元素的宽度和高度，因此它会影响坐标空间，使绘制的所有内容倾斜这是我如何使用 Vanilla JavaScript 设置宽度和高度的方法 canvas.width = numberForWidth canvas.height = numberForHeight var ctx = document.getElementById('canvas1').getContext('2d'); ctx.fillStyle = "red"; ctx.fillRect(10, 10, 30, 30); var ctx2 = document.getElementById('canvas2').getContext('2d'); ctx2.fillStyle = "red"; ctx2.fillRect(10, 10, 30, 30); canvas { border: 1px solid black; } <canvas id="canvas1" style="width: 50px; height: 100px;" height="50" width="100"></canvas> <canvas id="canvas2" style="width: 100px; height: 100px;" height="50" width="100"></canvas> 如果您想要基于例如的动态行为CSS 媒体查询，不要使用画布宽度和高度属性。使用 CSS 规则，然后在获取画布渲染上下文之前，将 CSS 宽度和高度样式分配给宽度和高度属性： var elem = document.getElementById("mycanvas"); elem.width = elem.style.width; elem.height = elem.style.height; var ctx1 = elem.getContext("2d"); ... 我相信 CSS 有更好的机制来指定画布的大小，并且 CSS 必须决定样式，而不是 JavaScript 或 HTML。话虽如此，在 HTML 中设置宽度和高度对于解决画布问题非常重要。 CSS 具有 !important 规则，允许覆盖属性的其他样式规则，包括 HTML 中的规则。通常，它的使用是不受欢迎的，但这里的使用是合法的hack。在 WebAssembly 的 Rust 模块中，您可以执行以下操作： fn update_buffer(canvas: &HtmlCanvasElement) { canvas.set_width(canvas.client_width() as u32); canvas.set_height(canvas.client_height() as u32); } //.. #[wasm_bindgen(start)] pub fn start() -> Result<(), JsValue> { // ... let canvas: Rc<_> = document .query_selector("canvas") .unwrap() .unwrap() .dyn_into::<HtmlCanvasElement>() .unwrap() .into(); update_buffer(&canvas); // ... // create resizing handler for window { let on_resize = Closure::<dyn FnMut(_)>::new(move |_event: Event| { let canvas = canvas.clone(); // ... update_buffer(&canvas); // ... window.add_event_listener_with_callback("resize", on_resize.as_ref().unchecked_ref())?; on_resize.forget(); } } 一旦加载 WASM 模块，然后每当调整窗口大小时，我们就会更新画布缓冲区。我们通过手动将画布的 width 和 height 指定为 clientWidth 和 clientHeight 的值来完成此操作。也许有更好的方法来更新缓冲区，但我相信这个解决方案比 @SamB、@CoderNaveed、@Anthony Gedeon、@Bluerain、@Ben Jackson、@Manolo、@XaviGuardia、@Russel Harkins 和 @fermar 建议的解决方案更好因为该元素由 CSS 设计样式，而不是 HTML。与 @Manolo 使用的 elem.style.width 和 elem.style.height 技巧或 @XaviGuardia 使用的 JQuery 等效项不同，它将适用于 canvas，其大小通过使用指定为 flex 或 grid 项目。与@Russel Harkings 的解决方案不同，这也可以处理调整大小。虽然我喜欢他的回答，因为它真的很干净、简单。 WASM 是未来！哈哈：D 附注有很多 .unwrap() 因为 Rust 明确地处理了可能的失败。P.P.S. { let on_resize = Closure::<dyn FnMut(_)>::new(move |_event: Event| { let canvas = canvas.clone(); // ... update_buffer(&canvas); // ... window.add_event_listener_with_callback("resize", on_resize.as_ref().unchecked_ref())?; on_resize.forget(); } 使用更好的库可以做得更干净。例如 add_resize_handler(&window, move |e: ResizeEvent| { let canvas = canvas.clone(); // ... update_buffer(&canvas); })

css html canvas height width

回答 10 投票 0

Kivy ScrollViewminimum_height 不再动态地使用 python 中的嵌套布局

目前正在与 Kivy 嵌套的layotus 和 scorll 视图作斗争。我使用一些按钮动态添加或删除表。随着页面的增长，我期望父 CreatePly 布局的 self.minimum_height ...

python kivy scrollview height

回答 1 投票 0

“auto”是 HTML 属性“height”和“width”的有效值吗？

auto 是 HTML 属性 height 和 width 的有效值吗？请提供可靠的来源。我无法找到有信誉的消息来源说是或否（即专门解决这个问题...

html syntax height width

回答 1 投票 0

如何根据文本内容使所有div的高度相同？

我仍然被一个长期存在的问题所困扰。为了简洁起见，我的网站在无序列表中有 3 个列表项。在我的演示中，列表是绿色框。每个列表项都包含一个图像...

html css list height

回答 3 投票 0

Flexbox：如何组合列上的百分比、像素和剩余高度？

我正在构建基本的网格系统，需要结合不同大小单位描述的弹性项目的高度，这些单位是％、px和剩余空间。 html: 我正在构建基本的网格系统，需要结合不同尺寸单位描述的弹性项目的高度，这些单位是％，px和剩余空间。 html: <div class="grid"> <div class="block" style="flex-basis: 50px;">50px</div> <div class="block" style="flex-basis: 25%;">25%</div> <div class="block">stretch to remaining space?</div> <div class="block" style="flex-basis: 50px;">50px</div> </div> CSS： html,body,.grid { height: 100%; padding: 0; margin: 0; } .grid { width: 300px; background: #aaa; display: flex; flex-direction: column; justify-content: flex-start; } .block { outline: solid 1px black; flex-grow: 0; // remove growing proportion flex-shrink: 0; // remove shrinking proportion } 工作示例： http://codepen.io/antraxis/pen/zxwgEo 使用 flex-grow 参数（flex简写属性中的第一个）： * { margin: 0; box-sizing: border-box; } .grid { height: 100dvh; background: #aaa; display: flex; flex-direction: column; } .block { outline: solid 1px black; } .a { flex: 0 0 50px; } .b { flex: 0 0 15%; } .c { flex: 1 0 0; } <div class="grid"> <div class="block a">block height 50px</div> <div class="block b">block height 15%</div> <div class="block c">block height *</div> <div class="block a">block height 50px</div> </div> 代码笔

css height flexbox stretch

回答 1 投票 0

如何获取文字的真实高度？

参考这个例子： $(文档).ready(函数() { var body = $('body'), 文本 = $('#text'); body.append('jQuery'); 乙...

javascript jquery text height

回答 1 投票 0

使用 rowtemplate 更改 datagridview 行高但不起作用

我有一个 DataGridView，其中有两列成员名称和成员图像。我想增加 DataGridView 中每一行的高度。我设置了属性的值，但高度没有改变，任何...

c# winforms datagridview height

回答 3 投票 0

如何在javascript中获取鼠标相对于窗口视口的位置？

event.pageY 获取相对于整个文档高度的鼠标位置（我假设是 document.documentElement.offsetHeight）。但是如何获取鼠标相对于当前视口的位置，wh...

javascript height dom-events viewport

回答 5 投票 0

Div 滚动使 padding-bottom 消失

我有一个具有以下结构的网站：成分我有一个具有以下结构的网站： <div class="main-outer"> <div class="main-inner"> <div class="test"> components </div> </div> </div> div 'test' 调用不同的组件。我正在尝试使其高度响应，这样如果组件具有“高度：100％”，它应该随着屏幕的增长而增长。但是，如果我在组件中设置最小高度，则滚动（来自 main-outer div）应该从该高度出现。我的问题是：当屏幕达到该最小高度时，我在'主内部类'中设置的填充底部（或边距）消失......我该如何解决这个问题？我这里有一个例子： https://jsfiddle.net/4o1j2zmn/1/ 编辑：我需要比“测试”的div更高的边距，因为当我调用许多组件时，我想让边距成为全局的我检查了你的代码，我认为“.main-outer”填充工作正常。这是“.main-inner”边距和“.test”类的固定高度的问题。我已将您的边距属性从“.main-inner”转移到“.test”类，并将“.test”高度设置为自动，以便它将根据内容进行调整，并显示距父容器外边缘的边距。请检查并尝试以下代码片段： .main-outer { padding: 0 50px; height:100vh; overflow-y: auto; overflow-x: hidden; background-color: blue; } .main-inner { height: 100%; box-sizing: border-box; } .test{ display: block; content: ''; height: auto; background-color: red; margin: 50px 0 50px 0; } <div class="main-outer"> <div class="main-inner"> <div class="test"> http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ </div> </div> </div> 对于任何在未来遇到这个问题的人来说，对我有用的修复方法是删除显式的 .main-inner 的 height: 100%;。注意：min-height: 100%;似乎也会导致同样的问题。 .main-outer { padding: 0 50px; height:100vh; overflow-y: auto; overflow-x: hidden; background-color: blue; } .main-inner { /* height: 100%; */ box-sizing: border-box; } .test{ display: block; content: ''; height: auto; background-color: red; margin: 50px 0 50px 0; } <div class="main-outer"> <div class="main-inner"> <div class="test"> http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ </div> </div> </div>

html css scroll height padding

回答 2 投票 0

CSS-P 噩梦

我有一个容器DIV位置：相对。把所有东西都装在里面然后一左一右一栏，古典布局。它们都绝对定位在这个相对#Main 中。我想要...

css height

回答 2 投票 0

设置控制台宽度（Windows、Python）

我正在使用Python开发一个基于文本的小型控制台游戏。因为我使用了一些 ASCII 艺术，所以我必须确保游戏启动后每个人的控制台宽度都相同。可以

python console height width set

回答 4 投票 0

带有 XIB 的动态高度单元：包括 UILabel 和 UIImageView

我正在尝试使用 XIB 设计一个具有以下布局和行为的 UITableViewCell：左侧的 UIView，固定大小为 44x44。旁边有一个 UILabel，可根据...