html - 画像をボックス内に収めて縦方向に揃える方法

Question

ユーザーが必要なピクセルをアップロードできるようにする必要がありますが、プロフィール写真のサイズは 100x100 を超えます。写真はSQUAREボックスに入っています。しかし、問題は、100x100 またはそれに類似したサイズをアップロードすると、期待どおりに機能することです。しかし、640x360 のピクセルまたはそれに類似した (またはワイドスクリーンの) 画像をアップロードすると、画像はボックスに適切にスケーリングされますが、垂直方向には配置されません。vertical-align を真ん中にしたいのですが、どうすればいいですか?

CSS:

#imgbox {
  height:100px;
  width:100px;
  overflow:hidden;
  border:solid 1px #000;
  margin-left:10px;
  margin-top:10px;
}
#imgbox img {
  width:100%;

  position:relative;
  //I want the vertical align of the image to be in the center
}

ここ: http://jsfiddle.net/ZdW9h/1/

score 4 · Accepted Answer

line-heightコンテナ div にa を設定するvertical-alignと、画像上で使用して配置できます。また、max-widthandmax-heightを使用して、画像が常にボックス内に含まれるようにする必要があります (それが必要な場合)。

http://jsfiddle.net/ZdW9h/7/

更新された CSS は次のとおりです。

#imgbox {
    height:100px;
    width:100px;
    line-height: 100px;
    overflow:hidden;
    border:solid 1px #000;
    margin-left:10px;
    margin-top:10px;
}
#imgbox img {
    max-width:100%;
    max-height: 100%;
    vertical-align: middle;
}

score 4 · Accepted Answer

いくつかのこと -

要素にクラスを使用しますimgbox。ID は、特定のドキュメント内の単一の要素を選択するために使用されます。

次に、背景画像のプロパティを持つ 1 つの div を使用することをお勧めします。これにより、相対的に配置できます。

HTML

<div class="imgbox" style="background-image: url(http://plants.montara.com/ListPages/FamPages/showpix/ranunculaS/aqufor_a.JPEG)"></div>
<div class="imgbox" style="background-image: url(http://pictures.inspirationfeed.netdna-cdn.com/wp-content/uploads/2010/06/Evolution_by_will_yen-500x500.png)"></div>

CSS

.imgbox {
    height: 100px;
    width: 100px;
    overflow: hidden;
    border: solid 1px #000;
    margin-left: 10px;
    margin-top: 10px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

JSFiddle

score 1 · Accepted Answer

width属性とheight属性imgを 100に設定するだけです: http://jsfiddle.net/ZdW9h/4/

ただし、この方法で画像のサイズを変更することは、一般的には最善の方法ではありません。GD などの画像ライブラリで画像のサイズを変更できる場合は、最初にそれを行うことをお勧めします。サーバーのスペースも節約できます。

score 0 · Accepted Answer

これで問題が解決するはずです：

 #imgbox img {
  width:100px;
  height: 100px;
  position:relative;    
}

他に何かお探しの場合はお知らせください。

score 0 · Accepted Answer

0

あなたが試すことができます：

#imgbox { display:table-cell; }

于 2013-01-17T06:35:50.813 に答える

html - 画像をボックス内に収めて縦方向に揃える方法

5 に答える 5

Related

Reference