假设页面上有三张 9* 图片:
<img src="...">
<img src="...">
<img src="...">
<img src="...">
<img src="...">
<img src="...">
<img src="...">
<img src="...">
<img src="...">
*举个例子，不会总是有 9 张图片——可能是 5 或 6 张等
我将如何使图像的百分比宽度对应于此顺序:
第一张图片:宽度:100%；
第二张图片:宽度:70%；
第三张图片:宽度:30%；
重复
类似于这里所做的:
总的来说，对于页面上的每张图片，宽度必须是:
第一张图片100%，
第二张图片 70%，
第三张图片 30%，
对所有其他图像按此顺序重复，例如:
第四张图片 100%，
第五张图片70%，
第六张图片 30%，
我相信需要使用脚本，尽管我不确定如何使用
基本实现:
<!DOCTYPE html>
<html>
<head>
<style>
img:nth-of-type(3n+0) { width: 100%; }
img:nth-of-type(3n+1) { width: 70%; }
img:nth-of-type(3n+2) { width: 30%; }
</style>
</head>
<body>
<div class="page">
<div class="i">
<img src="http://e794d552b4c822b8205c-27b9cc3fb8731a4a7598943b8a8a6a91.r73.cf1.rackcdn.com/1/1/large.jpg">
</div>
<div class="i">
<img src="http://e794d552b4c822b8205c-27b9cc3fb8731a4a7598943b8a8a6a91.r73.cf1.rackcdn.com/1/1/large.jpg">
</div>
<div class="i">
<img src="http://e794d552b4c822b8205c-27b9cc3fb8731a4a7598943b8a8a6a91.r73.cf1.rackcdn.com/1/1/large.jpg">
</div>
</div>
</body>
</html>
最佳答案
一些花哨的 CSS3 选择器应该可以做到这一点:
img:nth-of-type(3n+0) { width: 100%; }
img:nth-of-type(3n+1) { width: 70%; }
img:nth-of-type(3n+2) { width: 30%; }
参见 the documentation for nth-of-type on MDN .
请注意，这在 IE8 或更早版本中不起作用，您可能需要使用 JavaScript 解决方案。
关于javascript - 如何根据出现顺序更改多个图像的百分比宽度？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29503025/