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

Question

例如，Google Chrome 和 Opera 的最小宽度标签有问题，在 firefox 中运行良好

例如，我想显示带有内联显示和图像的列，我在 Firefox 中看到完美，图像显示为砖石，它很好，但在 google 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/

解决方案：要解决此问题，只需在 frnt_item_content img

中放入 10 % 而不是 100 % 并同时放入 min-width 而不是 width

Answer 1

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

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

这毫无意义，因为#frnt_item 没有固定宽度。因此，如果图像的宽度为 100%，#frnt_item 将拉伸直到其父级的 100% 被填充。您的图像比例会以这种方式丢失，这就是它们看起来如此有弹性的原因:)

Answer 2

我通过向 css 添加宽度解决了这个问题。尝试将 width:10% 添加到 frnt_item