html - 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 并使容器的背景图像成为所需的图像，并将背景大小属性设置为“覆盖”：

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