web-dev-qa-db-ja.com

<canvas>を含む子要素を持つ<div>でのオブジェクトフィットの使用

サイズと幅が可変の外側コンテナーがあります。このコンテナの中に、トリミングせずに比率を維持しながら、できるだけ大きくしたいキャンバスがあるとします。このため、通常はobject-fit: containを使用します。

さて、キャンバスだけではなく、別の要素が配置されたキャンバスがあるとします。

HTML：

<div class="outerContainer">
  <canvas width="640" height="360"></canvas>
  <div class="beside">
  </div>
</div>

CSS：

.outerContainer {
  display: flex;
  border: 0.5em solid #444;
  margin-bottom: 2em;
  object-fit: contain;
}

.outerContainer canvas {
  flex-grow: 1;
  background: #77a;
}

/* This element has a fixed width, and should be whatever height the <canvas> is */
.outerContainer .beside {
  flex-basis: 3em;
  flex-grow: 0;
  flex-shrink: 0;
  background: #7a7;
}

この場合、canvasで行ったように、outerContainerのサイズ全体をスケーリングします。問題は、object-fitが実際に要素をスケーリングしないことです...内容をスケーリングします。これは通常のブロック要素には当てはまらないようで、十分な幅があると内部のキャンバスが歪む可能性があります。

Badly skewed canvas

object-fit: containをcanvas要素に追加すると、縦横比は維持されますが、全幅が使用されます。つまり、.beside要素は右端まであります。これはキャンバス上の紫色の背景で視覚化されます。

Not skewed but not correct

.besideが常にキャンバスコンテンツの高さになるように、キャンバスコンテンツに合わせてouterContainerをスケーリングしたいのですが。 .outerContainerは、親要素の中央に配置し、キャンバスを歪めずにできるだけ多くのスペースを取ります。このように、任意の比例スケールで：

Desired image

これは最新のCSSで可能ですか？または、スクリプトソリューションを使用する必要がありますか？

例をいじる： https://jsfiddle.net/nufx10zc/

htmlcssflexboxobject-fit
21
Brad

それでいいかどうかはわかりませんが、もう少しHTMLを許可すれば、ほとんどの場合cssで実行できると思います。

次のhtmlを検討してください

<div class="outerContainer">
  <div class="canvasContainer">  
    <canvas width="640" height="360"></canvas>
  </div>
  <div class="beside">
  </div>
</div>

キャンバスの周りに少しdivを追加しました。このようにして、キャンバスに処理を任せ、フレックスにdivを使用します。

次のcssを使用：

* {
  box-sizing: border-box;
}

.outerContainer {
  display: flex;
  border: 0.5em solid #444;
  margin-bottom: 2em;
}

.canvasContainer canvas {
  width: 100%;
  background: #777;
  margin-bottom: -4px
}

.canvasContainer {
  flex-grow: 1;
  background: #77a;
}

/* This element has a fixed width, and should be whatever height the <canvas> is */
.outerContainer .beside {
  flex-basis: 3em;
  flex-grow: 0;
  flex-shrink: 0;
  background: #7a7;
}

使用可能なすべてのスペースを占めるキャンバスコンテナーがあります。そして、キャンバスはその中の画像スケーリングに応じて適応します。しかし、理由はわかりませんが、キャンバスの下部に少しマージンがあり、マイナスのマージンがありました。

フィドル： https://jsfiddle.net/L8p6xghb/3/

補足として、それをキャプションに使用する場合は、 <figure> や <figcaption> などのhtml5要素があります。

8
Py.

pureCSSソリューションは、必要なソリューションを考えると少し遠いものだと思います。以下が、次の手順を含むスクリプトを使用した提案です。

  1. canvasの使用可能なスペースに最適な画像のアスペクト比を見つけます

  2. widthのcanvasとflexboxの高さを更新します。

  3. キャンバスに画像を描画します。

説明のために、ウィンドウのサイズ変更時にフレームをリロードしました-詳細は以下のデモを参照してください（詳細な説明はインラインで提供されます）。

// Document.ready
$(() => {
  putImageOnCanvas();
});

// Window resize event
((() => {
  window.addEventListener("resize", resizeThrottler, false);
  var resizeTimeout;

  function resizeThrottler() {
    if (!resizeTimeout) {
      resizeTimeout = setTimeout(function() {
        resizeTimeout = null;
        actualResizeHandler();
      }, 66);
    }
  }

  function actualResizeHandler() {
    // handle the resize event - reloading page for illustration
    window.location.reload();
  }
})());

function putImageOnCanvas() {

  $('.outerContainer canvas').each((index, canvas) => {
    const ctx = canvas.getContext('2d');
    canvas.width = $(canvas).innerWidth();
    canvas.height = $(canvas).innerHeight();
    const img = new Image;
    img.src = 'https://static1.squarespace.com/static/56a1d17905caa7ee9f27e273/t/56a1d56617e4f1177a27178d/1453446712144/Picture7.png';
    img.onload = (() => {

      // find the aspect ratio that fits the container
      let ratio = Math.min(canvas.width / img.width, canvas.height / img.height);
      let centerShift_x = (canvas.width - img.width * ratio) / 2;
      let centerShift_y = (canvas.height - img.height * ratio) / 2;
      canvas.width -= 2 * centerShift_x;
      canvas.height -= 2 * centerShift_y;

      // reset the flexbox height and canvas flex-basis (adjusting for the 0.5em border too)
      $('.outerContainer').css({
        'height': 'calc(' + canvas.height + 'px + 1em)'
      });
      $('.outerContainer canvas').css({
        'width': 'calc(' + canvas.width + 'px)'
      });

      // draw the image in the canvas now
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, img.width * ratio, img.height * ratio);
    });
  });
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
.outerContainer {
  display: flex;
  border: 0.5em solid #444;
  margin-bottom: 2em;
  /*max available flexbox height*/
  height: calc(100vh - 2em);
}
.outerContainer canvas {
  background: #77a;
  /*max available canvas width*/
  width: calc(100vw - 4em);
}
.outerContainer .beside {
  flex-basis: 3em;
  flex-grow: 0;
  flex-shrink: 0;
  background: #7a7;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="outerContainer">
  <canvas></canvas>
  <div class="beside">
  </div>
</div>

[〜＃〜]編集[〜＃〜]：

  1. flex-basis for canvas最初は-しかし、Firefoxは適切に動作していませんでした。そのため、代わりにwidthを使用しています。

  2. スニペットには、Firefoxでの画面のサイズ変更（ページの再読み込み）に関する問題がいくつかあります。そのため、フィドルも含まれています。

UPDATED FIDDLE

2
kukkuz