5

サイトの中央に画像を配置しようとしています。水平方向と垂直方向の両方で中央に配置したいので、次のようにテーブル/テーブルセルレイアウトを使用しました:

<div id="mainContainer>
    <div id="horizon">
        <img src="url">
    </div>
</div>

ここで mainContainer はdisplay: tableに設定され、Horizo​​n はdisplay: table-cellに設定されています。

残念ながら、画像はこの構造の一部になるため、比例してサイズ変更されなくなりました。テーブル/テーブルセルのdivに移動するとすぐに、元のサイズにサイズ変更されます( max-width: 100%とmax-height: 100%のために比例してサイズ変更されるのではなく)

参照: http://jsfiddle.net/U8KcN/

編集：

私の悪い。問題を単純化しようとしました。画像の小さなスライドショーを作成したい。ここでの問題は、画像のサイズがわからないことです（スライドショーを使用している他の人を参照）。したがって、簡単に言えば、1) 画像の幅と高さが div の寸法よりも小さい場合は画像を div の垂直方向および水平方向の中央に配置し、2) 画像が div の寸法よりも大きい場合は画像のサイズを自動的に変更する特定の CSS が必要です (追記、幅が大きいか高さが大きいかは不明）。

出典：OPコメント

4

4 に答える 4

6

テーブルを使用することの弊害について誰かが話しているのを聞くたびに、彼らが DIV から完全なテーブル構造を作成し、ほとんど同じ量 (場合によってはそれ以上) のマークアップを使用しているのを見るたびに、本当に神経質になります。

ところで、Wordpress などの CMS を使用して、コンテンツ領域で独自のレイアウトを作成したいと考えている人のためにサイトを開発したことがありますか? HTML の知識がほとんどない人でも、Tiny MCE または別のエディターでテーブル ツールを使用できるようにすることで、これをうまく行うことができます。そうです、テーブルは依然として重要です。

最近、私は顧客のためにそれをしなければなりませんでしたが、表のセルの画像が応答せず、小さい画面サイズでは縮小されました。その問題を処理するために CSS に追加しなければならなかったのは、次のことだけでした。

table {

   table-layout: fixed; 

}

これで、表のセル内の画像が拡大縮小し、水平スクロールバーが表示されなくなりました。もちろん、テーブル幅と td 幅にもパーセンテージを使用する必要があります。

于 2013-11-05T01:31:01.343 に答える
2

レイアウトにテーブル ( display: table-cell) を使用することは、最近の Web 開発のアンチパターンです。この方法はIE 6 までずっと機能するため、画像を垂直および水平方向に中央揃えするために<span>with 要素を使用してみてください。また、コンテナに応じてサイズを変更したい場合は、画像サイズをパーセンテージに変更できます。display: inline-block

http://jsfiddle.net/hHWy8/1/

HTML:

<span class="horizontal">
    <span class="vertical">
        <img src="url" />
    </span>
</span>

CSS:

span {
    display: inline-block;
}
span.horizontal {
    text-align: center;
    width: 100%;
}
span.vertical {
    vertical-align: middle;
    border: 1px solid black; /* put a border on container for display purposes */
    line-height: 1000px;     /* this sets the vertical height */
    overflow: hidden;
    white-space: nowrap;
}
span.vertical img {
    height: 50px; /* set your image height (could be percent) */
    width: 50px;  /* set your image width (could be percent) */
}
span.vertical br {
    display: none;
}
于 2013-06-27T15:02:24.270 に答える
1

画像のサイズを変更するには、次の css を使用できます。

    html,body,div,img{
        height:100%;
    }

    img { width:100%}

html と本文の高さを 100% に設定します。これは、ページの高さが使用可能なすべてのスペースを占有するために必要です。

于 2013-06-27T15:15:44.940 に答える