26

SVG 画像を表示するだけのページを作成しています。要件は次のとおりです。

  • ベクトルはウィンドウ全体を占有する必要があります
  • ベクトルは縦横比を維持する必要があります (SVG ファイル自体で定義)
  • 歪曲を防ぐために、ベクターはトリミング/クリップする必要があります

CSS...

body {
  background: url(/path/to/image.svg);
  background-size: cover;
}

...ブラウザウィンドウが狭すぎると、トリミング/クリッピングではなくタイル表示になることを除いて、ほぼ完全に機能します。

以下にいくつかのスクリーン ショットを示します (dabblet によって残されたアーティファクトは無視してください)。 アスペクト比に近いウィンドウ

ここで、ウィンドウは元の画像の縦横比に近いです 窓

ここでは、ウィンドウは縦横比よりも「短く」、画像はトリミングされています (必要に応じて)。 ここに画像の説明を入力

ここでは、ウィンドウは縦横比よりも「狭い」ですが、画像はトリミングではなくタイリングされています (望ましくない)。

ここに私が持っていたいくつかの考えがあります...

  • これが起こらないように、何らかの方法で SVG 画像を変更できますか?
  • ページをマークアップ/スタイル設定して、目的の結果を達成できますか?
  • 私は HTML/CSS の領域にとどまりたいと思っていますが、Javascript が必要な場合は、まあまあです。

これが私が使っていたダブレットです... http://dabblet.com/gist/6033198

4

3 に答える 3

-2

このcssは機能しています。ありがとう

"background-size: contain;"

.cover{background:url(images/cover.jpg) no-repeat top center; display:inline-block; width:100%; height:400px; background-size: contain;}

<div class="cover">&nbsp;</div>
于 2013-12-17T07:04:56.143 に答える