Почему мои изображения div не заполняют весь поле div?

Question

я не могу за жизнь мне понять, почему в Google Chrome изображения в .productimage дивы не полностью заполняя ширину мудрое для .productbox дивы в нижней части этой страницы здесь: 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; 
} 

Другой вопрос, у Вас есть это у вас есть productbox с шириной 310px и productimage имеет ширину 318px. Вот вам рабочая сцена. JSFiddle