1

画像を希望どおりに拡大縮小するのにひどい時間を過ごしていHTML & CSSます。これが可能であることを願っています…私はで構成されるサイトを開発していheader, main content div and footer divます。これらの3つのdivはすべて、マスターラッパーdivに含まれます。どのdivも、ブラウザウィンドウに絶対的に配置または固定されていません。SVGフッターdivでは、このフッターdivにもテキストを挿入するため、背景としてベクター画像を設定しようとしています。SVG画像はデフォルト800 x 240pxですが、SVGは無限にサイズ変更できるため、拡大されます。SVGこの画像では、フッターdivの幅を比例して拡大したいと思います。したがって、たとえば、ブラウザを300px幅に縮小すると、画像は90px高くなります。ブラウザがに拡張されている場合1200px幅が広い場合、画像は360px高さに拡大縮小する必要があります。SVGは常にブラウザの幅である必要があり、その100%高さは比例したサイズである必要があります。

footer div背景画像の下に空白がないように、ブラウザウィンドウの一番下に配置したいと思います。footer divただし、ブラウザウィンドウの下部に固定として設定したくありません。ページスクロールのメインコンテンツdivの後にフッターを配置したいと考えています。したがって、長いWebページの投稿では、ページが少し下にスクロールされてから表示されるまで、フッターdivは表示されません。

助けてくれてありがとう！必要に応じて、より多くの情報を提供できます。まだCSSとHTMLを学んでいます！:)

4

3 に答える 3

0

最初に SVG を比例的にスケーリングするように設定します。

<svg preserveAspectRatio="xMinYMin">
</svg>

次に、フッターの背景として設定し、背景のサイズをcover次のように指定します。

   .footer {
     background: #000 url(image.svg) top left no-repeat;
     background-size: cover;
   }
于 2012-10-30T14:54:39.677 に答える
0

一般に、SVG 背景画像をスケーリングするには、viewbox を設定する必要があります。そうしないと、preserveAspectRatio が機能しません。

<svg
   viewBox = "0 0 90 70" 
   preserveAspectRatio="none"
   ...

次に、たとえば CSS で次のようにします。

.logo{
    background:transparent url(images/matheboss-logo-w.svg) center center no-repeat;
    display:block;
    background-size:contain;
    height:50px;
    width:50px
}
于 2015-05-12T06:52:48.970 に答える