Merge pull request #51 from INxST/feature/#43/fix-detail

[Update] 画像サイズ調整
INxST · Jul 27, 2024 · a8ea368 · a8ea368
2 parents f642148 + 8f90e77
commit a8ea368
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 7 deletions.
diff --git a/src/components/DetailImage.astro b/src/components/DetailImage.astro
@@ -5,7 +5,7 @@ interface Props {
 }
 const { column } = Astro.props;
 const className = cn(
-  'md:h-full flex flex-col flex-wrap gap-4 md:gap-10 [&_picture]:block [&_picture]:h-full [&_img]:h-full [&_video]:h-full',
+  'md:h-full flex flex-col flex-wrap [&>li]:w-full md:[&>li]:w-auto gap-4 md:gap-10 [&_picture]:block md:[&_picture]:h-full md:[&_img]:h-full md:[&_video]:h-full',
   {
     'md:flex-col': column,
     'md:[&>li]:h-full': !column,

diff --git a/src/pages/works/detail.astro b/src/pages/works/detail.astro
@@ -44,12 +44,11 @@ const title = '医療従事者サイト';
         </div>
       </section>
 
-      <picture class="ts-horizontal-scroll-item mt-9 md:mt-0
-      block">
+      <picture class="ts-horizontal-scroll-item mt-9 md:mt-0 block">
         <img
           src="https://placehold.jp/1600x1080.png"
           alt=""
-          class="ts-image-white-in h-full"
+          class="ts-image-white-in md:h-full"
         />
       </picture>
 
@@ -78,7 +77,7 @@ const title = '医療従事者サイト';
         <img
           src="https://placehold.jp/1080x1080.png"
           alt=""
-          class="ts-image-white-in h-full"
+          class="ts-image-white-in md:h-full"
         />
       </picture>
 
@@ -127,7 +126,7 @@ const title = '医療従事者サイト';
                 <img
                   src="https://placehold.jp/824x840.png"
                   alt=""
-                  class="ts-image-white-in h-full"
+                  class="ts-image-white-in md:h-full"
                 />
               </picture>
             </li>
@@ -187,7 +186,7 @@ const title = '医療従事者サイト';
           <img
             src="https://placehold.jp/895x1080.png"
             alt="タイトル名タイトル名タイトル名タイトル名タイトル名を見る"
-            class="ts-image-white-in h-full"
+            class="ts-image-white-in md:h-full"
           />
 
           <span