4

私は電話ギャップに取り組んでいます。そのため、どのデバイスにも適用できるように、コードを一般的な形式で提供する必要があります。

寸法が2350*180の画像があります。

私はこれらのコードで試しました..

width: 100%;
top: 100%;
margin-top: 50%;

しかし、これらはさまざまなデバイスの中心ではありません。

それから私はそれを試しました

vertical-align: middle;

それから

display: block;
text-align: center;

それから

<table>
    <tr style="vertical-align: middle;">
        <td id="main" style="width: 100%;">
            <img src="" />
        </td>
    </tr>
</table>

上記のすべての CSS について、私の出力 ---->画像は、 margin-top:0; を指定した場合のように、画面の上部のマージンに固定されます。

私を助けて、私を修正してください。

この大きな画像に関してあと 2 つ質問があります

今、私は背景画像を持っています

style="background:url("img/bg.png") no-repeat fixed center top; width:100%; height:100%; "

このコードは少数のみで機能します..私のコードに間違いはありますか?

2番目の質問は、スクロールするとスクロールバーが表示されることです。だから私は追加しました

style="overflow:hidden;"

<img src=""/> tag.

私は正しいですか、それとも他のコードを追加する必要がありますか?

4

3 に答える 3

4

画像に追加max-width:100%して、の表に配置しますheight:100%

body, html{
    height:100%;
    margin:0;
    padding:0
}
table{
    height:100%;
    background:#fffad6;
}
img{
    max-width:100%;
}

デモ

于 2013-06-06T06:45:07.870 に答える
3

これはうまくいきます - image-url を src-attribute に追加することを忘れないでください。また、テーブルの代わりに div を使用することもできます。

HTML:

<table>
    <tr>
        <td>
            <img src="" />
        </td>
    </tr>
</table>

CSS:

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

table {
    width: 100%;
    height: 100%;
    text-align: center;
}

img { 
    max-width: 100%;
    vertical-align: middle;
}

注: テーブルを囲む親要素がある場合は、height: 100%;それらにも追加する必要があります。

于 2013-06-06T07:04:39.960 に答える
2

私は少し掘り下げましたが、これは水平と垂直の両方で画像を中央に配置する幅を考え出したものです: http://jsfiddle.net/jdtjk/2/

CSS:

.middle{
    position:absolute;
    top:0;
    bottom:0;
    right: 0;
    left: 0;
    margin: auto; 
}

HTML:

<div>
    <img src="*" class="middle" />
</div>

編集：

ウィンドウ サイズに合わせて画像を縮小するように変更しました: http://jsfiddle.net/jdtjk/5/

CSS の変更:

.middle{
    position:absolute;
    top:0;
    bottom:0;
    right: 0;
    left: 0;
    margin: auto; 
    max-width: 100%;
    max-height: 100%;
    height: auto;
    width: auto;
}

アップ/ダウンスケールを制限したい場合は、css で min-width min-height プロパティを使用できます。画像を拡大したい場合は、最大プロパティを変更できます。

于 2013-06-06T07:34:33.990 に答える