CSS - 图像溢出技巧

Question

我正在坚持一些设计技巧，我想像这样制作图像项目框

实际图像最大高度 300px ，宽度 225px 。包含图片和文字的项目框的宽度和高度为 190px x 190px 我正在使用此图片http://farm8.staticflickr.com/7122/7424355198_72620895bd_m.jpg

我尝试使用overflow: hidden为图片项隐藏下面的高度以显示图片文字。但我只是这样http://jsfiddle.net/Dkh4q/

有人能说出我做过的错误吗？

谢谢！

更新

有关预期结果的详细信息，如果您可以登录zerply，请查看此http://zerply.com/christievdc/portfolio。

概要

最后，我做了一个愚蠢的错误，我在 addmenu-item 中添加了额外的} 。谢谢你们回答！

Answer 1

试试这个，对于可变宽度和高度，你需要使用一些javascript。

.addmenu-item {
margin-top:25px;
float:left;
overflow:auto;
background: #F4F4F4;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-webkit-transition: color 50ms cubic-bezier(0.470, 0.000, 0.745, 0.715);
-moz-transition: color 50ms cubic-bezier(0.470, 0.000, 0.745, 0.715);
-o-transition: color 50ms cubic-bezier(0.470, 0.000, 0.745, 0.715);
transition: color 50ms cubic-bezier(0.470, 0.000, 0.745, 0.715);
}

Answer 2

您好在这个元素中有一个额外的 {：

.addmenu-item {
width: 190px;
height: 190px;
background: #F4F4F4;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-webkit-transition: color 50ms cubic-bezier(0.470, 0.000, 0.745, 0.715);
-moz-transition: color 50ms cubic-bezier(0.470, 0.000, 0.745, 0.715);
-o-transition: color 50ms cubic-bezier(0.470, 0.000, 0.745, 0.715);
transition: color 50ms cubic-bezier(0.470, 0.000, 0.745, 0.715);
}
} <--------

删除它并且必须正常工作。

Answer 3

不确定您是使用插件还是jQuery相关的东西，但希望下面的内容有所帮助。

<style type="text/css">
    .container{
         border: 1px solid #CCC;
         border-radius: 8px;
         height: 190px;
         width: 190px;
         float: left;
     }
    .container .image{
         height: 160px;
         width: 190px;
         overflow: hidden;
     }
    .container .caption{
         font-weight: bold;
         color: #666;
         background-color: #CCC;
         height: 14px; /* height 30px; */
         padding: 8px 6px;
     }
     .shadow{
         box-shadow: 4px 4px 10px #AAA; /* adds a nice little shadow */
     }
</style>

<div class="container shadow">
    <div class="image"><img src="..."/></div>
    <div class="caption">Text goes here</div>
</div>

Answer 4

另一种选择是使用纯CSS并使容器的背景图像成为所需图像，并将background-size属性设置为'cover'：

http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=cover