我没有成功的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;
}
如何纠正风格?请帮忙。提前致谢
答案 0 :(得分: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/
答案 1 :(得分:1)
在不重新调整大小的情况下缩小图片的术语称为“裁剪”,直接达到您的答案,将使用不同的css属性:background
。 div将被删除。如果您需要<div>
代码,@Heliio's method非常棒。
代码示例如下 HTML:
<a href="#" class="pic pic1">
</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)
答案 2 :(得分:0)