Html CSS-图像溢出技巧

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

其中实际图像的最大高度为300px，最大宽度为225px。项目框（包括图像和文本）的宽度和高度为190px x 190px我正在使用此图像

我尝试对图像项使用

overflow:hidden

来隐藏其下方的高度，以显示图像文本。但我只会这样

谁能说出我犯的错误吗

谢谢

更新

有关预期结果的更多信息，如果您可以登录到zerply，请检查此示例

摘要

---

最后，我犯了一个愚蠢的错误，我把额外的}东西放在添加菜单项中。谢谢回答

试试这个，对于可变宽度和高度，您需要使用一些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);
}

---

不确定您是否正在使用插件或与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>

.集装箱{
边框：1px实心#CCC；
边界半径：8px；
高度：190px；
宽度：190px；
浮动：左；
}
.容器.图像{
高度：160px；
宽度：190px；
溢出：隐藏；
}
.容器.说明{
字体大小：粗体；
颜色：#666；
背景色：#CCC；
高度：14px；/*高度30px*/
填充：8px 6px；
}
.影子{
盒子阴影：4px4x10px#AAA；/*添加了一个漂亮的小阴影*/
}
这里有文字

您好，此元素中有一个额外的{：

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

.add菜单项{
宽度：190px；
高度：190px；
背景#f4；
-moz边界半径：5px；
-webkit边界半径：5px；
边界半径：5px；
-webkit过渡：彩色50ms立方贝塞尔（0.470,0.000,0.745,0.715）；
-moz过渡：彩色50ms立方贝塞尔（0.470,0.000,0.745,0.715）；
-o型过渡：彩色50ms立方贝塞尔（0.470,0.000,0.745,0.715）；
过渡：彩色50ms立方贝塞尔（0.470,0.000,0.745,0.715）；
}
}另一个选项是使用纯CSS，使容器的背景图像成为所需图像，并将背景大小属性设置为“cover”：

请立即检查此项！如何在master
中创建该项，以及为什么需要在此处使用javascript？添加溢出：auto；我知道显式地提到图像宽度和高度的方法。但我想使用溢出使图像看起来很好。请检查我在问题中显示的zerply链接。您是否考虑过使用
背景图像
？不确定为什么会被否决；这不是一个完整的代码问题答案，但在这种情况下它是一个有效的选项，并且它不需要javascript或jQueryworks，对我来说很好。但是我需要使用fadeIn/fadeOut，这显然不适用于背景图像：(