相关疑难解决方法(0)

有没有办法在动态重新调整大小的灵活盒容器中创建画布？

最好只使用CSS解决方案,但我认为重绘需要JavaScript吗？

我认为一个解决方案可能是听取重新调整大小事件然后缩放画布以满足弹性框父级的大小然后强制重绘但我最好使用尽可能多的CSS或更干净/更少代码解决方案

当前的方法是基于CSS的,其中画布根据父flex框元素重新调整大小.在下面的屏幕截图中,图形模糊,重新定位并从画布溢出.

CSS:

html,body{
            margin:0;
            width:100%;
            height:100%;
        }
        body{
            display:flex;
            flex-direction:column;
        }
header{
            width:100%;
            height:40px;
            background-color:red;
        }
        main{
            display:flex;
            flex: 1 1 auto;
            border: 1px solid blue;
            width:80vw;
        }
        canvas{
            flex: 1 1 auto;
            background-color:black;
        }

HTML:

<header>
</header>
<main>
    <canvas id="stage"></canvas>
</main>

使用Javascript:

$( document ).ready(function() {
    var ctx = $("#stage")[0].getContext("2d");
    ctx.strokeStyle="#FFFFFF";
    ctx.beginPath();
    ctx.arc(100,100,50,0,2*Math.PI);
    ctx.stroke();
});

JS小提琴显示问题:https://jsfiddle.net/h2v1w0a1/

我正在尝试使用一些Flexbox容器内的图像响应object-fit: contain,并且当图像调整大小时,布局似乎保持原始图像大小,导致滚动条出现.

使用Chrome开发工具检查图像的宽度表明宽度仍为1024(但高度已适当降低.)

(我从CSS FlexBox布局中的自动调整大小图像中获取灵感并保持纵横比？ 达到这一点)

我错过了一些额外的CSS属性吗？

JSFiddle:https://jsfiddle.net/w6hgqf18/1/

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

.page {
  height: 100%;
  display: flex;
}

.main-container {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
}

.half-containers {
  flex: 0 1 50%;
  overflow: auto;
  box-sizing: border-box;
  border: 0.5px solid red;
  display: flex;
}

.page-header {
  flex: 0 0 auto;
  background-color: #dcdcdc;
}

.page-footer {
  flex: 0 0 auto;
  background-color: #dcdcdc;
}

img {
  object-fit: contain; …

在尝试使图像适合矩形时，我遇到了一个奇怪的问题，想知道是否有人知道为什么这三种使用对象适合的方式表现不同：

.container {
  width: 250px;
  padding-top: 20%;
  border: 1px solid red;
  position: relative;
  display:inline-block
}

.container>img {
  position: absolute;
  top: 0;
  left: 0;
  object-fit: contain;
  object-position: center center;
}

.image {
  width: 100%;
  height: 100%;
}

.image-1 {
  right: 0;
  bottom: 0;
}

.image-2 {
  right: 0;
  bottom: 0;
  max-height: 100%;
  max-width: 100%;
}

<div class="container">
  <img src="https://www.fillmurray.com/200/300" class="image">
</div>
<div class="container">
  <img src="https://www.fillmurray.com/200/300" class="image-1">
</div>
<div class="container">
  <img src="https://www.fillmurray.com/200/300" class="image-2">
</div>

正如您从第一张图片中看到的那样 - 宽度和高度一切正常。在第二张图像中，我尝试设置图像，以便它用绝对定位而不是宽度和高度填充空间，但这完全被忽略，图像只是溢出或保持其原始大小。

为了解决这个问题，我在第三个图像上使用了最大宽度和高度，但这完全忽略了对象位置，并且不会增长到比自身更大的宽度或高度。

为什么对象适合仅适用于声明的宽度和高度，而如果图像只是占用坐标空间则不起作用，为什么对象位置不适用于最大宽度和高度？

让我们考虑一下这段代码：

.canvas {
  width:150px;
  height:150px;
}
canvas {
  box-sizing:border-box;
  border:5px solid;
}

<canvas height="150" width="150"></canvas>
<canvas class="canvas"></canvas>

我们canvas定义了两个具有相同宽度/高度、相同边框和box-sizing:border-box. 我们可以清楚地看到，我们使用 CSS 属性的画布尊重box-sizing（边框从宽度/高度减少），但使用属性定义的第一个是忽略box-sizing（边框添加到宽度/高度）。

我首先认为它与属性的使用有关，但在使用imgor时似乎不像预期的那样工作iframe。

.canvas {
  width:150px;
  height:150px;
}
iframe,img {
  box-sizing:border-box;
  border:5px solid;
}

<iframe height="150" width="150"></iframe>
<iframe class="canvas"></iframe>

<img height="150" width="150" src="https://picsum.photos/200/300?image=1069">
<img class="canvas" src="https://picsum.photos/200/300?image=1069">

为什么canvas元素有这种行为？

经过一番搜索，我发现应该避免对画布使用宽度/高度属性，因为它会缩放画布并且不会像我们想象的那样调整它的大小。

var canvas = document.querySelector("canvas"),
ctx = canvas.getContext("2d");
ctx.fillRect(0, 0, 150, 150);

canvas {
  width: 150px;
  height: 150px;
  border:1px solid …