如何根据图片方向设置样式，使竖图适配横图高度且不拉伸？

纯CSS实现（现代浏览器支持） #

利用CSS的aspect-ratio属性选择器，可直接根据图片自身宽高比区分横竖图并设置对应样式：

网格容器样式 #

.image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 1rem;
  align-items: center;
}

图片样式 #

/* 基础样式：确保图片不扭曲 */
.image-grid img {
  object-fit: contain;
}

/* 横图（宽>高，宽高比>1）：保持原比例，最大高度限制为10em */
.image-grid img:where([aspect-ratio > 1]) {
  max-height: 10em;
  max-width: 100%;
}

/* 竖图（高>宽，宽高比<1）：强制高度为10em，宽度按比例自动缩放 */
.image-grid img:where([aspect-ratio < 1]) {
  height: 10em;
  width: auto;
}

注意：该方案依赖Chrome 88+、Firefox 89+、Safari 15.4+对aspect-ratio选择器的支持，若需兼容旧浏览器，可使用下面的Angular指令方案。

Angular指令方案（兼容所有浏览器） #

通过Angular指令动态给图片添加横竖图类，再用CSS控制样式：

1. 创建检测图片方向的指令 #

import { Directive, ElementRef, OnInit } from '@angular/core';

@Directive({
  selector: '[imgOrientation]'
})
export class ImgOrientationDirective implements OnInit {
  constructor(private el: ElementRef<HTMLImageElement>) {}

  ngOnInit(): void {
    const img = this.el.nativeElement;
    // 处理图片已缓存的情况
    if (img.complete) {
      this.setOrientationClass();
    } else {
      img.addEventListener('load', () => this.setOrientationClass());
    }
  }

  private setOrientationClass(): void {
    const img = this.el.nativeElement;
    // 移除旧类，避免重复添加
    img.classList.remove('portrait', 'landscape');
    // 根据宽高比添加对应类
    img.classList.add(img.height > img.width ? 'portrait' : 'landscape');
  }
}

2. 对应CSS样式 #

.image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 1rem;
  align-items: center;
}

.image-grid img {
  object-fit: contain;
}

/* 横图样式 */
.image-grid img.landscape {
  max-height: 10em;
  max-width: 100%;
}

/* 竖图样式 */
.image-grid img.portrait {
  height: 10em;
  width: auto;
}

3. 在模板中使用 #

<div class="image-grid">
  <img imgOrientation src="your-landscape-image.jpg" alt="横图">
  <img imgOrientation src="your-portrait-image.jpg" alt="竖图">
</div>

关键说明 #

• object-fit: contain确保图片始终保持原比例，不会拉伸扭曲。
• 横图通过max-height限制高度，max-width:100%避免超出网格单元格宽度。
• 竖图强制height:10em对齐横图高度，width:auto自动按比例缩放宽度。

内容的提问来源于stack exchange，提问作者Nelson Teixeira