Question

我没有成功的CSS。应位于div中图片的中心（不同大小）。查看示例：

image example

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;
}

如何纠正风格？请帮忙。提前致谢

Answer 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/

Answer 2

在不重新调整大小的情况下缩小图片的术语称为“裁剪”，直接达到您的答案，将使用不同的css属性：background。 div将被删除。如果您需要<div>代码，@Heliio's method非常棒。

代码示例如下 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/

Answer 3

这是一种在.box

中垂直居中图像的简单技巧

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

要在彼此旁边添加更多框，请将float: left添加到.box

垂直对齐：中间 - div中的图像（不同大小的图片）

3 个答案: