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

Question

例如，我在Google Chrome和Opera的最小宽度标签上遇到了问题，在Firefox中可以正常工作

例如，我想显示行内显示和图像，我在firefox中看到完美，图像显示为砖石结构，很好，但在谷歌浏览器中显示不好，最小宽度问题，如何显示可以在Chrome浏览器中修复此问题，等等，谢谢

#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;   
}

您可以在此处查看示例：

https://jsfiddle.net/rzfrjL1g/

解决方案：要解决此问题，只需将10％而不是100％放进去，也将min-width放进去，而不要在frnt_item_content img中放宽

Answer 1

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

我已经从#frnt_item_content img删除了width: 100%属性定义

这没有任何意义，因为#frnt_item没有固定的宽度。 因此，如果图像的宽度为100％，则#frnt_item将拉伸，直到其父图像的100％被填充。 这样就失去了图像的比例，这就是为什么它们看起来如此拉伸的原因:)

Answer 2

我通过添加宽度到CSS解决了这样的问题。 尝试将宽度：10％添加到frnt_item