图片缩略图不拉伸变形需用容器设固定宽高+overflow:hidden，img设width:100%;height:100%;Object-fit:cover；文字右对齐推荐flex布局，父容器display:flex;align-items:flex-start;，图片容器flex:0 0 200px；响应式堆叠用flex-direction切换，注意order影响可访问性；文字截断需同时满足width、white-space:nowrap、overflow:hidden三条件。
图片缩略图如何不拉伸变形又保持宽高比
直接用 img 标签设固定宽高，90% 的情况会压缩失真。真正可控的方式是让容器接管尺寸约束，图片只负责“填满”或“居中显示”。
- 给外层
div设固定宽高（如200px × 150px），并加overflow: hidden -
img设置width: 100%; height: 100%; object-fit: cover;—— 这才是关键，cover保证填满且不形变，contain则会留白 - 别依赖
max-width单独控制，它不约束高度，缩略图依然可能被压扁
摘要文字如何与图片右侧对齐且不换行错位
常见错误是把图片和文字都写成 inline-block 后靠 vertical-align 调，结果在不同字体/行高下反复偏移。稳妥做法是用 Flex 布局，但得注意老浏览器兼容性。
- 父容器加
display: flex; align-items: flex-start;，文字默认左对齐，无需额外设置 - 图片容器设
flex: 0 0 200px;（不缩放、不增长、固定宽度），避免文字内容多时挤压缩略图 - 如果必须支持 IE10/11，改用
display: table-cell;+vertical-align: top;，但需确保父级是table显示模式
响应式下缩略图和文字堆叠顺序怎么控制
移动端常需要图片在上、文字在下，而桌面端是左右排列。用 flex-direction 切换最直接，但容易忽略 order 属性的副作用。
- 桌面端：父容器
flex-direction: row;，图片order: 1;，文字order: 2; - 移动端加媒体查询：
@media (max-width: 768px) { flex-direction: column; }，此时order仍生效，可微调堆叠顺序 - 别在媒体查询里重复写
order，除非真要交换位置；多数情况只需改flex-direction - 注意：
order会影响可访问性阅读顺序，屏幕阅读器会按order值读，不是 dom 顺序
文字截断显示省略号但保留语义结构
用 text-overflow: ellipsis 看似简单，但一加就失效，通常是因为漏了三个必要前提条件。
立即学习“前端免费学习笔记（深入）”；
- 必须同时满足：元素有
width（或max-width）、white-space: nowrap;、overflow: hidden; - 多行截断不能只靠 css2，得用
display: -webkit-box;+-webkit-line-clamp: 2;，但 firefox 不支持，需 js 回退 - 摘要文字若含链接或强调标签，别用
text-overflow直接截——会切掉半个<a></a>标签，导致 HTML 结构损坏；应由后端或 JS 控制截断点，在标签边界处停
实际排版时最容易被忽略的是字体度量差异：同一 line-height 在不同字体下基线位置不同，会导致图片和文字在视觉上“没对齐”，哪怕代码看起来完全正确。这时候得用 transform: translateY() 微调，而不是反复改 margin 或 padding。