如何设置li相对父ul的比例宽高 移除默认黑点 实现响应式横向滚动图片列表

问题解决方法 #

1. 移除li左上角的小黑点 #

小黑点是li元素默认的列表项标记，只需要给ul添加list-style: none属性即可完全移除。

2. 实现li的相对尺寸要求 #

你需要的两个尺寸效果可以通过以下CSS属性实现：

• 宽度等于父元素ul宽度的20%：直接设置width: 20%即可，百分比宽度默认参照父元素的内容宽度。如果需要把li之间的20px间距也纳入20%的宽度计算，可改用width: calc(20% - 20px)
• 高度等于自身宽度的1.5倍：直接使用CSS原生的aspect-ratio属性，设置aspect-ratio: 1 / 1.5即可。如果需要兼容旧版浏览器，可以使用padding百分比方案：设置height: 0; padding-top: 150%，padding的百分比默认参照元素自身宽度计算，刚好可以实现高度和宽度的比例绑定。

修改后的完整代码 #

CSS代码

ul.movie-fans-images {
  margin: 0;
  padding: 0;
  list-style: none; /* 移除列表默认标记，解决小黑点问题 */
  display: flex;
  flex-direction: row;
  width: 100%;
  overflow-x: auto;
}

ul.movie-fans-images li {
  flex: 0 0 auto;
  width: 20%; /* 宽度为父元素的20% */
  aspect-ratio: 1 / 1.5; /* 高是宽的1.5倍，现代浏览器兼容 */
  margin-right: 20px;
  background-size: contain;
  background-repeat: no-repeat;
}

.image1, .image2, .image3, .image4, .image5, .image6 {
  background-image: url("https://images.unsplash.com/photo-1623700802990-64369e024f41?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYyOTI5MTU5NQ&ixlib=rb-1.2.1&q=85");
}

HTML代码

和原有HTML代码保持一致即可：

<ul class="movie-fans-images">
  <li class="image1"></li>
  <li class="image2"></li>
  <li class="image3"></li>
  <li class="image4"></li>
  <li class="image5"></li>
  <li class="image6"></li>
</ul>

内容的提问来源于stack exchange，提问作者Zhou Haibo