2

固定サイズの div のグリッドがあり、これは CSS のみのままにする必要があります。各 div 内には、ランダムなサイズの画像が含まれています。

縦横比を維持しながらdivサイズに合わせて画像をスケーリングし、div内で水平方向と垂直方向の両方に中央揃えする必要があります。

  #holder {
    width: 800px;
    margin: 0 auto;
  }
  .tile {
    display: inline-block;
    padding: 10px 15px;
    border: 1px solid black;
    text-align: center;
    /*vertical-align: middle;*/
    width: 300px;
    height: 300px;
  }
  .tile img {
    /*vertical-align: middle;*/
    outline: 1px dashed red;
    max-height:100%;
    max-width:100%;
  }

垂直方向に中央揃えできません。他のすべては正常に機能しているようです。

更新: また、img が div より小さい場合、これは機能しません。

4

3 に答える 3

0

ここでの問題は、ブロックの高さが不明なことです。

firefox/chromeで動作するソリューションは次のとおりです。

#holder {
    width: 800px;
    margin: 0 auto;
}
.tile {
    padding: 10px 15px;
    border: 1px solid black;
    width: 300px;
    height: 300px;
    display: table;
}
.tile-layout {
    width: 100%;
    height: 100%;
    display: table-cell;
    vertical-align: middle;
}
.tile img {
    outline: 1px dashed red;
    width:100%;
}

この HTML テンプレートを使用すると、次のようになります。

 <div id="holder">
      <div class="tile">
           <div class="tile-layout">
                <img src="{{ img }}"/>
           </div>
      </div>
 </div>
于 2012-11-08T15:26:58.270 に答える
0 
#holder {

    display:table;
    width: 800px;
    margin: 0 auto;
    height:100%;
    possition:relative;

}

.tile {

    display: table-cell;
    border: 1px solid black;
    text-align: center;
    vertical-align: middle;

}

.tileInner{

    display:block;
    width: 300px;
    height: 300px;
    padding: 10px 15px;

}

.tile img {
    display:table-cell;
    vertical-align: middle;
    outline: 1px dashed red;
    max-height:100%;
    max-width:100%;

}

html

<div id="holder">

    <div class="tile">

        <div class="tileInner">

                <img src="imageUrl"/>

        </div>

    </div>

</div>
于 2012-11-20T09:18:00.567 に答える
0

width: 100%;そしてheight: auto;（またはheight: auto !important;img要素に高さ属性がある場合）通常はうまくいきます。

申し訳ありませんが、質問を読み間違えました。これにより、縦横比は修正されますが、センタリングは修正されません。このトレッドは、いくつかの貴重なアイデアを提供する可能性があります。

于 2012-11-08T14:31:17.523 に答える