1

私はCSSに成功しませんでした。の画像の中央（異なるサイズ）にある必要がありdivます。例を参照してください。

画像例

そしてhtmlとcssの例-http ://jsfiddle.net/KJXUt/

HTML： 

<div class="box">
  <a href="#" class="pic">
    <img src="http://pics.posternazakaz.ru/pnz/product/small_x2/97/61/ccc0980cde08f9032cd665f7104aca10.jpg" alt="" width="300" height="130" />
  </a>
</div>
<div class="box">
  <a href="#" class="pic">
    <img src="http://www.22.ru/ow_userfiles/plugins/photo/photo_preview_137.jpg" alt="" width="140" height="140" />
  </a>
</div>​

CSS：

body {
    background: #D6E8FF;
}
.box {
    border: #555 1px solid;
    margin-right: 10px;
    width: 100px;
    height: 100px;
    overflow: hidden;
    display: table-cell;          /* <-- problem */
    vertical-align: middle;       /* <-- problem */
}
img {
    max-width: 100px;
    height: auto;
}

</ p>

スタイルを修正する方法は？助けてください。前もって感謝します

4

3 に答える 3

1

displayを使用する場合：table-cell; セルのサイズを固定する必要があります。多分それは良い解決策ではありません。

本当にそれが欲しいのなら、私は理解していませんが：

body {
    background: #D6E8FF;
}
.box {
    border: #555 1px solid;
    float:left;
    width: 100px;
    height: 100px;
    overflow: hidden;
}
img {
    max-width: 100px;
}

ここでの例：http：//jsfiddle.net/KJXUt/1/

または、必要に応じて：http: //jsfiddle.net/KJXUt/3/

于 2012-10-25T13:39:14.110 に答える
1

サイズを変更せずに画像を小さくするという用語は「トリミング」と呼ばれ、答えを直接達成するために、別のcssプロパティbackgroundが使用されます。そして、divは削除されます。タグが必要な場合は、@Heliioの方法が最適です。<div>

コードサンプルは次のHTMLです。

<a href="#" class="pic pic1">
&nbsp;
</a>

CSS：

.pic {
    display:inline-block;
    border: #555 1px solid;
    margin-right: 10px;
    width: 100px;
    height: 100px;
}

.pic1{
 background: transparent url(http://mw2.google.com/mw-panoramio/photos/medium/62256112.jpg) -20px -200px no-repeat;
}

cssにはいくつかの負の値があり、これらを変更するのは非常に面倒ですが、実際には-((imagewidth-100)/2) x -((imageheight-100)/2)

http://jsfiddle.net/KJXUt/9/

于 2012-10-25T14:12:20.137 に答える
0

これは、画像を垂直方向に中央に配置する簡単な手法です。.box

http://codepen.io/AntonNiklasson/pen/pkaov

隣同士にボックスを追加するには、に追加float: leftします.box

于 2012-10-25T10:58:10.773 に答える