谷歌浏览器和Opera中的CSS最小宽度

Question

I have problem with the min-width tag for Google Chrome and Opera for example , in firefox works pefectly

For example i want show cols with display inline and with image into with this i see perfect in firefox , the images show as masonry and it´s nice but in google chrome show bad and the problem it´s with min-width , how i can fix this in Google Chrome , etc , thank´s , regards

#frnt_item
{
display:inline-block;
position:relative;
min-width:10%;
max-height:350px;
border:1px solid #EEE;
vertical-align:text-top;
margin-left:7px;
margin-bottom:7px;
-webkit-border-radius: 10px;
-webkit-border-top-right-radius: 2px;
-webkit-border-bottom-left-radius: 2px;
-moz-border-radius: 10px;
-moz-border-radius-topright: 2px;
-moz-border-radius-bottomleft: 2px;
border-radius: 10px;
border-top-right-radius: 2px;
border-bottom-left-radius: 2px;
overflow:hidden;
cursor:pointer;
cursor:hand;
}




#frnt_item_content img
{
width:100%;
max-height:350px;   
}

You can see example here :

https://jsfiddle.net/rzfrjL1g/

SOLUTION : For fix this problem only need put 10 % and not 100 % and put min-width also and not width in frnt_item_content img

Answer 1

https://jsfiddle.net/rzfrjL1g/2/

I've removed the width: 100% attribute definition from #frnt_item_content img

It makes no sense because #frnt_item doesn't have a fixed width. Therefor if the width of the image is 100%, the #frnt_item will stretch until 100% of it's parent is filled. The ratio of your image is lost this way, that's why they look so stretchy :)

Answer 2

I solved such problem by add width to css. Try to add width:10% to frnt_item