ul 列表中的图像最大宽度

Question

max-width:100% 在 div 中放置图像时有效，但将其添加到 li 中时无效。

这里是 DEMO

但奇怪的是，如果我从 .pro ul 中完全删除样式，它就会起作用。由于定义了 ul 的样式以完成 UI 部分，因此我无法从代码中删除任何现有样式。

P.S - max-width:100% 用于仅将图像拉伸(stretch)到图像原始大小的范围。 width:100% 使图像适合我不想要的设备尺寸。

检查这个DEMO这就是我希望它在 ul 列表中工作的方式。您可以调整窗口大小以检查它是如何工作的。

Answer 1

是this你想要什么？。我对 CSS 进行了以下更改。

.pro ul{margin:0; padding:0;  list-style:none; width:100%; white-space: nowrap; overflow:hidden;}
.pro li{  display:block; margin:0; padding:0;  }
.pro li a {display:block}
.pro ul li img{     margin:0 auto; width:100%; max-width:100%}

更新:

检查 this更新的 fiddle 。当我检查 chrome 和 firefox 时，我得到了完全相似的输出。否则请指定您使用的浏览器。

我刚刚从 .pro ul li img 样式中删除了 width:100%

更新 2:

如果您从 fiddle 的 .pro ul 样式中删除 overflow:hidden; 属性，它将 work如你所料。但是如果你没有办法编辑你的 css，抱歉。