Question

我不能为我的生活弄清楚为什么在谷歌浏览器中.productimage divs中的图像并没有完全填满本页底部附近的.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; }

我做错了什么？

Answer 1

您没有在代码中定义任何图片尺寸。因此，图像将默认为实际尺寸。

在CSS中尝试这样的事情

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

您遇到的另一个问题是您的产品包装宽度为310px，而产品图片的宽度为318px。这是一个适合你的小提琴。 JSFiddle

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

1 个答案: