1

テーブル内の画像の高さを制限しようとしています。テーブルの理由は、これらの画像をページの中央に垂直方向および水平方向に配置できるようにするためです。私が抱えている問題は、ブラウザの高さよりも大きい画像がページの下部から消えてテーブルが拡大することです。画像を持ってmax-height:100;、それに合わせて拡大縮小したいです。幅では機能しますが、高さでは機能しません。

これが私がこれまでに持っているものです...

<div id="table">
<div id="cell">
<img src="image.jpg"/>
</div>
</div>

と

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

#table{
display:table;
height:100%;
width:100%;
}

#cell{
display:table-cell;
vertical-align:middle;
text-align:center;
background-color:#ccc;
}

img{
max-width:100%;
max-height:100%;
}
4

1 に答える 1

3

を使用せずにこれを実現できますtable。HTML の基本的な概要は次のとおりです。

<body>
    <img src = "image.jpg"/>
</body>

CSS:

html, body {
    height: 100%;
    width: 100%;
}
body {
    position: relative;
}
img {
    position: absolute;
    margin: auto; /*make sure it's centered both vertically and horizontally*/
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: 100%;
    max-height: 100%;
}

そして小さな jsFiddle デモ: little link . bodyこれが機能するために必要であることに注意してくださいposition: relative;。

これが役に立ったことを願っています！

于 2012-09-01T19:29:21.593 に答える