html设计完后页面比率,html – 在一个页面中填入一个列表并保持项目比率

我不认为只有CSS才有可能. JS解决方案如下所示：

document.addEventListener("DOMContentLoaded", setLiHeight);

window.addEventListener("resize", setLiHeight);

function setLiHeight() {

let ul = document.querySelector("ul");

let lis = ul.querySelectorAll("li");

let title = ul.querySelector("div");

let images = ul.querySelectorAll("img");

// Set height for lis

Array.from(lis, function(li) {

li.style.height = ul.offsetHeight / lis.length - 1 + "px";

});

// Set height for images according to height title

Array.from(images, function(img) {

img.style.height = ul.offsetHeight / lis.length - title.offsetHeight + "px";

});

}

html,

body {

margin: 0;

}

ul {

height: 100vh;

margin: 0;

}

li img {

width: auto;

}

• title1

  

• title2

  

• title3

  

• title4

  

• title5

  

• title6

  

• title7

  

• title8

  

这里唯一的假设是列表的高度是固定的.