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

将图片缩小而不重新调整大小的术语称为“裁剪”，为了直接实现您的答案，background将使用不同的 css 属性：并且 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 回答