-2

私のサイトにはdivがあり、div内には幅と高さが異なるさまざまな画像があります。サイズや形に関係なく、画像を中央に配置したい。divが200px * 200pxだとしましょう。すべての画像には min-width:100% が必要です。min-height:100%; 背景に白が入らないように。したがって、基本的には、画像の中心をdivの中心にしたいと考えています。どうすればいいのですか？...

<!DOCTYPE html>
<html>
  <head>
    <style>

      .div{
        width:200px;
        height:200px;
        overflow:hidden;
        box-shadow:0px 0px 5px #000;
      }

      .img{
        /*What shall I put here?*/
        min-width:100%;
        min-height:100%; 
      }

    </style>
  </head>

  <body>
    <div class="div">
      <img class="img" src="img.jpg">
    </div>
  </body>
</html>
4

2 に答える 2

0

これは重複した質問です。ここで参照されているように、答えは、要素をbackground-image使用するのではなくCSS として画像imgを表示し、中央に表示するように設定することです。

div.with-background-image { 
  background: url(/path/to/image.jpg) no-repeat center center;
}

画像が少なくともその「包含」要素と同じ大きさであることを確認するには、さまざまなプロパティを受け入れるbackground-sizeプロパティを使用できます。必要なものは です。これはcover、画像の両方の寸法が要素の寸法と少なくとも等しくなるように、レンダリング エンジンに画像を引き伸ばすように指示します。

div.with-background-image {
  background: url(/path/to/image.jpg) no-repeat center center;
  background-size: cover;
}
于 2013-10-24T02:22:06.763 に答える
0

画像を div の背景として設定し、背景の位置を設定することをお勧めします。

于 2013-10-23T22:17:29.923 に答える