为什么我的div图像没有填满整个div框？

我一辈子都无法弄清楚为什么在Google Chrome浏览器中.productimage div中的图像不能完全填充此页面底部附近的.productbox div的宽度：http：//www.daylightfoods .com / products-beta /

不过, 它在Mozilla Firefox中完美运行。

我想要做的是让”产品”部分框中的照片填满整个宽度, 就像页面顶部”专业”部分中的框一样。有什么建议或想法吗？这是Wordpress中的自定义编码页面。

某处的间距有问题吗？还是CSS？我在这里包括代码片段：

<img src="../wp-content/themes/mightymitty_custom/assets/whiteleaf_greybg.png" alt="White Daylight Foods Logo"><span style="margin-left:10px;font-family:AvenirRoman, Arial;font-size:36px;color:#fff;">Products</span>

<div class="productbox"><div class="productimage"><img src="http://www.daylightfoods.com/wp-content/themes/mightymitty_custom/assets/products/products_corn.png" alt=""></div><div class="productcaption"><strong>Fresh Produce</strong><br>Located in the heart of the Silicon Valley, we are in close proximity and have access to the highest quality produce year around from trusted growers on the Central Coast, San Joaquin Valley and specialty growers along the North Coast.</div> 

<div class="productbox"><div class="productimage"><img src="../wp-content/themes/mightymitty_custom/assets/products/products_organic.png" alt=""></div><div class="productcaption"><strong>Organic</strong><br>As certified organic produce distributors, we source the highest quality Certified Organic produce from trusted growers.</div> 

这是相关CSS的副本：

.productbox {
display:inline-block;
height:360px;
width:310px;
margin:10px;
background-color:#fff;  
-moz-border-radius-bottomright: 30px;
border-bottom-right-radius: 30px;
-moz-border-radius-bottomleft: 30px;
border-bottom-left-radius: 30px;
vertical-align:top; }

.producttitle {
font-family:arial;
font-size:14px;
font-weight:bold; }

.productimage {
width:318px;
height:210px;
padding:0px; }

.productcaption {
height:140px;
font-family:arial;
font-size:12px;
padding-left:15px;
padding-top:12px;
padding-right:15px;
padding-bottom:10px; }

.producttags {
font-family:arial;
font-size:11px;
color:#9aca3c;
padding-left:15px;
padding-bottom:10px; }  

我究竟做错了什么？

#1

你没有在代码中定义任何图像尺寸。因此, 图像将默认为其实际大小。

在CSS中尝试类似的方法

.productbox .productimage img {
 width: 100%;
 height: 100%;
 height: auto;
}

你遇到的另一个问题是, 你的productbox的宽度为310px, productimage的宽度为318px。这是为你工作的小提琴。 JSFiddle