如何在列表项中嵌入缩略图并使其适配列表项高度且右对齐

嘿，这个需求我之前也碰到过，用CSS就能完美解决，给你两个实用的方案，你看着选：

方案一：用Flexbox布局（推荐，现代浏览器友好） #

这是目前最灵活的实现方式，不用操心浮动带来的布局问题，还能轻松保证图片和列表项高度对齐。

首先你的HTML结构可以保持不变：

<ul>
  <li>
    <img src="https://upload.wikimedia.org/wikipedia/commons/d/dd/Square_-_black_simple.svg" alt="黑色正方形">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </li>
</ul>

然后添加CSS样式：

/* 给列表项设置Flex布局 */
ul li {
  display: flex;
  align-items: stretch; /* 让图片和文字高度完全匹配列表项 */
  gap: 1rem; /* 图片和文字之间留些间距，可根据需求调整 */
  margin-bottom: 1.5rem; /* 列表项之间的间距，可选 */
}

/* 控制图片的样式 */
ul li img {
  margin-left: auto; /* 把图片推到列表项的最右侧 */
  max-height: 100%; /* 图片高度不超过列表项的高度 */
  width: auto; /* 保持正方形图片的原始比例，避免拉伸变形 */
  object-fit: contain; /* 确保图片完整显示，不会被裁剪 */
}

这个方案的好处是：布局逻辑清晰，Flexbox会自动处理元素的对齐和高度适配，而且现在主流浏览器都支持，几乎没有兼容性问题。

方案二：用浮动布局（兼容旧浏览器） #

如果需要适配一些比较老的浏览器，浮动也是个可行的选择，不过要注意处理浮动的包裹问题：

CSS样式如下：

/* 给列表项添加overflow:auto，用来包裹内部的浮动元素 */
ul li {
  overflow: auto;
  margin-bottom: 1.5rem;
}

/* 设置图片右浮动 */
ul li img {
  float: right;
  max-height: 100%;
  width: auto;
  margin-left: 1rem; /* 图片和文字的间距 */
}

这里要注意：必须给li设置overflow:auto（或者其他清除浮动的方法），否则列表项的高度可能会塌陷，导致布局混乱。

补充说明 #

因为你的图片是正方形，设置max-height:100%和width:auto后，图片会自动根据列表项的高度（由文字撑开）调整大小，同时保持正方形比例，完全满足你“适配列表项高度”的需求。

备注：内容来源于stack exchange，提问作者elbord77