13

次のようなブラウザに表示したい画像があります。

  1. 画像がブラウザーのビューポートよりも小さい場合、画像は水平方向と垂直方向の中央に配置されます。
  2. 画像がビューポートよりも大きい場合、画像の縦横比を調整せずに、できるだけビューポートを埋めるように画像が縮小されます。繰り返しますが、画像は水平方向と垂直方向の中央に配置されます。

JavaScript を使用したくありません。これを行うのに最適な/最もセマンティックな HTML と CSS は何ですか?

更新セマンティクスに関する説明を求められました。画像はコンテンツです。HTML 内の唯一のコンテンツ。

解決

@GionaFのアイデアは、私を幸せな（そして非常にシンプルな）解決策に導きました：

HTML

<!DOCTYPE html>
<head>
  <title></title>
  <LINK href="test2.css" rel="stylesheet" type="text/css">
</head>
<body>
    <div>
      <img src="photo.jpg" alt="photo" />
    </div>
</body>

CSS

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

4 に答える 4

20

あなたは多くの方法でそれを達成することができますが、コンテキストを知らずに「セマンティック」にすることはできません (画像はページのメイン/唯一のコンテンツですか? ブログ投稿の途中ですか?)。に行きdivます。

1. position:absolute;+margin:auto;

サポート: クロスブラウザ

HTML

<html>
<body>
    <div id="container">
        <img src="your-image.jpg">
    </div>
</body>
</html>​

CSS

html,body,#container {
    height:100%;
}
#container {
    width:100%;
    position:relative;
}
#container > img {
    width:100%;
    max-width:400px; /* real image width */
    position:absolute;
    top:0; left:0; right:0; bottom:0;
    margin:auto;
}

デモ

2. display:table;+ display:table-cell;+vertical-align:middle;

サポート: IE8+、その他すべてのブラウザー - IE7 フォールバックあり (ソース 1 ) ( 2 ) ( 3 )

HTML

<html>
<body>
    <div id="container">
        <span> /* it's important that you use a span here
                  not a div, or the IE7 fallback won't work */
            <img src="your-image.jpg">
        </span>
    </div>
</body>
</html>​

CSS

html,body,#container {
    height:100%;
}
#container {
    width:100%;
    display:table;
    *display:block; /* IE7 */
}
#container > span {
    display:table-cell;
    *display:inline-block; /* IE7 */
    vertical-align:middle;
    text-align:center;
}
#container > span > img {
    width:100%;
    max-width:400px; /* real image width */
}

デモ

3.background-size:contain;

サポート: IE9+、その他すべてのブラウザー - ベンダー プレフィックス付き (ソース 1 ) ( 2 )

HTML

<html>
<body>
    <div id="container"></div>
</body>
</html>​

CSS

html,body,#container {
    height:100%;
}
#container {
    margin:0 auto;
    max-width:400px; /* real image width */
    background:url(your-image.jpg) 50% 50% no-repeat;
    background-size:contain;
}

デモ

IE8 のレンダリング方法height:auto;には注意してください。比率が維持されない場合があります。

編集： 「画像の縦横比を調整せずに」と書いていることに気づきました。本当に比率を保ちたくないのなら、その方が簡単です...しかし、本当にそれを意味しますか? 

于 2012-10-01T00:50:23.923 に答える
0

画像を格納するコンテナーの高さを設定しない限り、これを達成することはできません。ビューポートが画像を中央に配置する場所を知るためには、画像と同じサイズを維持するのではなく、作業している全体の高さを知る必要があります。高さは、指示された場合、または実際のコンテンツで満たされている場合にのみ拡張されます。

水平方向の中央に配置するには、画像の周りにコンテナを設定し、「0, auto」のマージンを与える必要があります。コンテナー内で画像の幅を 100% に設定し (これにより、高さがそれに合わせて適切にスケーリングされるため、比率が正しく保たれます)、コンテナーにもパーセンテージ ベースの幅が与えられます。

于 2012-09-30T21:58:28.443 に答える
0

画像またはサラウンド div に、margin: auto の幅と高さを設定して、画像を中央に配置する必要があります。以下のコードがどのように機能するかを確認してください。

CSS

#container {
width: 1000px;
height: 1000px;
}

#img {
    background-color:#000;
width: 100px;
height: 100px;
margin: 0 auto;
}​

HTML

<div id="container">

<div id="img">

</div>

編集

画像を背景として設定しますか? 次に、ボディを 100% に設定します。

body
{
    background-image: url('background.jpg');
    background-repeat: no-repeat; /* you know... don't repeat... */
    background-position: center center; /*center the background */
    background-attachment: fixed; /*don't scroll with content */
}
于 2012-09-30T22:18:14.253 に答える
0

私は完璧な解決策を見つけることができませんでした (私が読んだことから、CSS と HTML だけを使用してやりたいことを行うことは不可能です)。しかし、私はあなたが必要とするものに近い解決策を見つけました。繰り返しますが、完璧ではありません。だからここに行きます（あなたは実際にあなたのイメージをの背景として置きますdiv）：

#mydiv {
    width: 100%;
    height: 100%;
    position: relative;
    background-image: url(photo.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto 98%, cover;
}

したがって、ここで重要なのはbackground-sizeプロパティです。ここで何をするか: div/container の幅/高さの指定されたパーセンテージに画像を拡大または縮小します (div の幅と高さはビューポートによって決定されます)。ビューポートよりも大きい画像の場合、この解決策は適切ですが、問題は小さい画像 (拡大されている) にあります。max-height残念ながら、現在の CSS の実装では、 にまたはmax-widthを指定することはできませんbackground-image。このテーマについて詳しく知りたい場合は、この Web ページを開いてください: http://www.css3.info/preview/background-size/。

とにかく、JavaScript ソリューションの方が優れています。それが役に立てば幸い。

于 2012-09-30T23:48:14.793 に答える