我一辈子都无法弄清楚为什么在Google Chrome浏览器中.productimage div中的图像不能完全填充此页面底部附近的.productbox div的宽度：http：//www.daylightfoods .com / products-beta /
不过, 它在Mozilla Firefox中完美运行。
我想要做的是让”
产品”
部分框中的照片填满整个宽度, 就像页面顶部”
专业”
部分中的框一样。有什么建议或想法吗？这是Wordpress中的自定义编码页面。
某处的间距有问题吗？还是CSS？我在这里包括代码片段：
<
img src="http://www.srcmini.com/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" >
<
/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="http://www.srcmini.com/wp-content/themes/mightymitty_custom/assets/products/products_organic.png" >
<
/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;
}
【为什么我的div图像没有填满整个div框（）】你遇到的另一个问题是, 你的productbox的宽度为310px, productimage的宽度为318px。这是为你工作的小提琴。 JSFiddle
推荐阅读
- 为什么我的页面在wordpress博客中重定向到localhost（）
- 为什么在gutenberg图像尺寸列表中看不到新图像尺寸
- 谁可以从wordpress网站上删除”https://deloton.com”恶意软件（）
- 更改WordPress主题中的”加载更多”按钮的最佳方法是哪种（）
- 我将在CSS中使用哪个选择器来使Buddypress用户个人资料图像变成圆形（）
- 从get_template_directory_uri到get_theme_file_uri VS哪个更好，为什么（）
- 我页面右侧的空间是哪里来的（）
- 性能工具之Jmeter压测WebSocket接口
- vSAN永久磁盘故障的处理过程