fix(common): Don't warn about image distortion is fill mode is enabled (

angular#47824) The image distortion warning (when rendered aspect ratio is noticeably different than intrinsic) doesn't make sense with fill mode, where the user may want the image to stretch, crop or letterbox. PR Close angular#47824
nouraellm · Nov 6, 2022 · 487dc94 · 487dc94
1 parent 5655a6e
commit 487dc94
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 1 deletion.
diff --git a/packages/common/src/directives/ng_optimized_image/ng_optimized_image.ts b/packages/common/src/directives/ng_optimized_image/ng_optimized_image.ts
@@ -367,9 +367,11 @@ export class NgOptimizedImage implements OnInit, OnChanges, OnDestroy {
         assertEmptyWidthAndHeight(this);
       } else {
         assertNonEmptyWidthAndHeight(this);
+        // Only check for distorted images when not in fill mode, where
+        // images may be intentionally stretched, cropped or letterboxed.
+        assertNoImageDistortion(this, this.imgElement, this.renderer);
       }
       assertValidLoadingInput(this);
-      assertNoImageDistortion(this, this.imgElement, this.renderer);
       if (!this.ngSrcset) {
         assertNoComplexSizes(this);
       }

diff --git a/packages/core/test/bundling/image-directive/e2e/image-distortion/image-distortion.ts b/packages/core/test/bundling/image-directive/e2e/image-distortion/image-distortion.ts
@@ -36,6 +36,10 @@ import {Component} from '@angular/core';
      <!-- Aspect-ratio: 1.0652173913 -->
      <img ngSrc="/e2e/b.png" width="245" height="230">
      <br>
+     <!-- Fill mode disables aspect ratio warning -->
+     <!-- Aspect-ratio: 0.1 -->
+     <img ngSrc="/e2e/b.png" width="24" height="240" disableOptimizedSrcset fill>
+     <br>
      <!-- Supplied aspect ratio is correct & image has 0x0 rendered size -->
      <img ngSrc="/e2e/a.png" width="25" height="25" style="display: none">
      <br>