5

ビューポートの高さ全体を占める画像があります。画像の高さは、ビューポートの高さ全体 (100%) にまたがる必要があります。これにより、画像が表示される画面に収まるようになり (ここでは既に完了しています)、幅は高さに相対的に比例する必要があります。私のページ ( http://lamininbeauty.co.za )を見るとわかるように、ページの両側にスペースがあります。画像を水平方向に中央揃えにしたい。以下は私のコードです：

CSS:

body{
    margin: 0px;
    padding: 0px;
    overflow: hidden;
}

#main{
    margin: auto;
}

img.bg {
        /* Set rules to fill background */
        max-height: 100%;

        /* Set up proportionate scaling */
        height: auto;

        /* Set up positioning */
        position: fixed;

}

HTML:

<body>
<div id="main">
    <img class="bg" src="images/massage2.jpg" border="none" />  
</div>
</body>

注: 画像の縦横比が失われることは望ましくなく、常に垂直方向に 100% に収まる必要があり、画像が切り取られたり、垂直方向にスクロールしたりすることはありません。水平センタリング。IE8 以前ではサポートされていないため、background-size プロパティには近づかないようにしています。

4

4 に答える 4

10

に追加left:0;right:0;margin:0 auto;するだけですimg.bg（example）：

body{
    margin: 0px;
    padding: 0px;
    overflow: hidden;
}

#main{
    margin: auto;
}

img.bg {
    /* Set rules to fill background */
    max-height: 100%;

    /* Set up proportionate scaling */
    height: auto;

    /* Set up positioning */
    position: fixed;

    /* Align horizontally */
    left:0;
    right:0;
    margin:0 auto;   
}

代替ソリューション

画像が（水平または垂直に）途切れないようにし、常に中央に配置したい場合は、代わりに次のコードを試してください（https://stackoverflow.com/a/6284195/526741から）：

<img class="absoluteCenter" src="PATHTOIMAGE">

/* Don't Change - Positioning */
.absoluteCenter {
 margin:auto;
 position:fixed;
 top:0;
 bottom:0;
 left:0;
 right:0;
}

/* Sizing */
img.absoluteCenter {
 max-height:100%;
 max-width:100%;
}
于 2012-07-16T21:04:21.437 に答える
1

img を div に入れて設定しtext-align: centerます。imgではなく、divを固定してください。より小さい画像を引き伸ばすには、height: 100%代わりに を使用しmax-heightます。

div.bg {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    text-align: center;
}
div.bg img {
    height: 100%;
}​

実際のデモ: http://jsfiddle.net/Mt7ce/

于 2012-07-16T21:02:14.137 に答える
1

私はあなたmainが他のアイテムを含むと仮定しているので、2番目のラッパーでdiv:

<div id="main">
    <div class="bg">
        <img src="http://lamininbeauty.co.za/images/massage2.jpg" border="none" />
        <span>Some text.</br>And Some More.</span>
    </div>  
</div>

このCSSを設定できます：

body {
    overflow: hidden;
}

.bg{
    width: 100%;
    height: 100%;
    text-align: center;
    position: fixed;
}

.bg img {
    max-height: 100%;
    height: auto;
}

.bg span {
    display: block;
    position: absolute;
    width: 100%;
    font-size: 20px; /* sizing this to the dynamic height of img will be a challenge */
    top: 20%;
}

ここに示すように、必要なものを (今すぐテキストで) 取得します。前述のように、テキストを追加する際に直面する最大の課題は、そのテキストのサイズを変更することです。@mediaでテキストのサイズを変更するには、おそらく JavaScript またはセットを使用する必要がありますheight。個人的には、テキストが重要でない限り (これが背景の場合はそうではないと思います)、テキストを画像に配置して、サイズに合わせて拡大縮小し、画像との関係を正しく保つようにします。

于 2012-07-16T21:02:21.807 に答える
0

メインの高さを設定できるかどうかはわかりませんが、高さを設定できる場合は

body{
    margin: 0px;
    padding: 0px;
    overflow: hidden;
}

#main{
    text-align: center;
    height: 300px;
}

img.bg {
        /* Set rules to fill background */
        max-height: 100%;

        /* Set up proportionate scaling */
        height: auto;       
}

私はこれをFFでのみテストしました。メインの高さについては、jquery で常にビューポートに設定できます。その高さを設定しないと、あなたが望むものを思いつくことができませんでした。

于 2012-07-16T21:00:35.667 に答える