image-orientation属性基本效果实例页面

展示

代码

• HTML：

  <h4>image-orientation:from-image</h4>
  <img class="from-image" src="./exif.jpg">
  <h4>image-orientation:none</h4>
  <img class="none" src="./exif.jpg">

• CSS：

  img {
      width: 300px; 
  }
  .from-image {
      image-orientation: from-image;
  }
  .none {
      image-orientation: none;
  }
  @supports (image-orientation: none) {
      img {
          height: 300px;
          object-fit: contain;
          object-position: 0 0;
      }
  }