Fix product detail image layout shift

Cmastris · Nov 21, 2023 · 3c47829 · 3c47829
1 parent d723c15
commit 3c47829
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 3 deletions.
diff --git a/front-end/src/features/products/ProductDetail.js b/front-end/src/features/products/ProductDetail.js
@@ -103,8 +103,13 @@ export function ProductDetail() {
  return (
  <div className={utilStyles.pagePadding}>
  <section className={styles.summarySection}>
- <div>
- <img src={imagePath} alt={productData.name} className={styles.image}></img>
+ <div className={styles.imageContainer}>
+ <img
+ src={imagePath}
+ alt={productData.name}
+ height="500"
+ width="500"
+ className={styles.image}></img>
  </div>
  <div className={styles.summaryTextContent}>
  <h1 className={styles.productName}>{productData.name}</h1>

diff --git a/front-end/src/features/products/ProductDetail.module.css b/front-end/src/features/products/ProductDetail.module.css
@@ -6,9 +6,18 @@
  align-items: flex-start;
 }
 
-.image {
+.imageContainer {
+ width: 500px;
  max-width: 100%;
+}
+
+.image {
+ /* https://web.dev/articles/aspect-ratio#example_preventing_layout_shift */
+ width: 100%;
+ height: auto;
+ max-width: 500px;
  max-height: 500px;
+ aspect-ratio: 1 / 1;
  border: 1px solid rgb(220, 220, 220);
 }
 
@@ -53,6 +62,10 @@
  align-items: center;
  }
 
+ .imageContainer {
+ width: 450px;
+ }
+
  .image {
  max-height: 450px;
  }