1

160x160ピクセルの div があります。このdivに画像を表示したい。サイズを変更せずにdivに画像を表示したい。

  • 画像が div より小さい場合は、サイズを変更せずに画像を div の中央に表示します。
  • 画像が div よりも大きい場合は、サイズを変更せずに画像の中央部分を div に表示します。

この div は、現実世界のウィンドウのようなものです。窓のサイズに応じて、その窓から景色を見ることができます。

これで理解できると思いますか？

ありがとう

4

6 に答える 6

7

次のような単純な背景画像を使用するだけです。

div {background:url(image.jpg) 50% 50% no-repeat; height:160px; width:160px}

実際に使用したい場合は、<img>これを行うことができます：

<div><img src="image.jpg" /></div>​​​​​​​​​​​​​

div {position:relative; text-align:center; overflow:hidden; height:160px; width:160px}
img {position:absolute; left:50%; margin-left:-250px}​

margin-left画像幅の半分 - 画像サイズが事前にわかっている場合にのみ機能します。画像サイズがわからない場合は、JavaScript でこれを行うことができますか?

于 2012-09-11T07:02:42.303 に答える
3 
<div><img src="yourimage.jpg" /></div>

div{width:auto; margin:0 auto}
div img{max-width:100%}

max-width は、画像の元のサイズとして最大幅を取ります。ウィンドウのサイズを変更しても、小さい画像で効果を確認できます。

于 2012-09-11T06:57:23.993 に答える
1

これがあなたに必要なものだと思います.....

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style type="text/css">
            #imageLoader{
                border:1px solid #B0B0B0;
                height:160px;
                width:160px;
                background-image: url('images/Science.png');
                background-position:center center;
                background-repeat:no-repeat;
                background-clip:content-box;
            }
        </style>
    </head>
    <body>
        <div id="imageLoader" style="">
        </div>
    </body>
</html>

それに応じて画像名を変更します。

これが私の フィドルです

于 2012-09-11T09:30:52.110 に答える
1

画像を背景として設定することもできます

background: url('image.png') no-repeat center center;

以下に例を示します: http://jsfiddle.net/H5U3H/

于 2012-09-11T07:03:33.150 に答える
0

これを行う最善の方法は、画像を div の背景画像として設定することです。

div { 
    background: transparent url(path/to/image.jpg) no-repeat center 0; 
    width: 160px; 
    height: 160px; 
}

画像がdivよりも大きい場合は画像を中央に配置し、そうでない場合は画像をdivの（水平）中央に表示します。

于 2012-09-11T07:02:08.317 に答える