From e52bd6ec2cefa178e76d64a7db1f04bf4f0044d1 Mon Sep 17 00:00:00 2001
From: Ryosuke Igarashi <igarashi.ryosuke@classmethod.jp>
Date: Fri, 20 Oct 2023 11:11:06 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20=E3=83=AA=E3=83=B3=E3=82=AF=E3=81=AE?=
 =?UTF-8?q?=E4=B8=AD=E3=81=AB=E7=94=BB=E5=83=8F=E3=81=8C=E3=81=82=E3=82=8B?=
 =?UTF-8?q?=E5=A0=B4=E5=90=88=E3=80=81=E3=83=AA=E3=83=B3=E3=82=AF=E7=AF=84?=
 =?UTF-8?q?=E5=9B=B2=E3=82=92=E7=94=BB=E5=83=8F=E3=81=AE=E5=A4=A7=E3=81=8D?=
 =?UTF-8?q?=E3=81=95=E3=81=AB=E5=90=88=E3=82=8F=E3=81=9B=E3=82=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/zenn-content-css/src/_content.scss |  5 +++++
 packages/zenn-content-css/test.html         | 12 +++++++++++-
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/packages/zenn-content-css/src/_content.scss b/packages/zenn-content-css/src/_content.scss
index 183a056a..eba6d617 100644
--- a/packages/zenn-content-css/src/_content.scss
+++ b/packages/zenn-content-css/src/_content.scss
@@ -268,6 +268,11 @@ img ~ em {
   color: $c-gray-darker;
   font-size: 0.92em;
 }
+// リンクの中に画像がある場合、リンクの範囲を画像の大きさと合わせる
+a:has(img) {
+  display: table;
+  margin: 0 auto;
+}
 details {
   font-size: 0.95em;
   margin: 1rem 0;
diff --git a/packages/zenn-content-css/test.html b/packages/zenn-content-css/test.html
index d5b01b06..b7f3da39 100644
--- a/packages/zenn-content-css/test.html
+++ b/packages/zenn-content-css/test.html
@@ -12,7 +12,6 @@
       max-width: 700px;
       margin: 1.5rem auto;
     }
-
   </style>
 </head>
 
@@ -284,6 +283,17 @@ <h3 id="画像の横幅を指定する">画像の横幅を指定する</h3>
         loading="lazy" /><br />
       画像の表示が大きすぎる場合は、URLの後に半角スペースを空けて<code>=○○x</code>と記述すると、画像の幅を指定できます。
     </p>
+    <h3 id="画像をリンクにする">画像をリンクにする</h3>
+    <div class="highlight">
+      <pre class="highlight plaintext"><code>[![altテキスト](https://画像のURL =250x)](https://zenn.dev)</code></pre>
+    </div>
+    <p>
+      <a href="https://zenn.dev">
+        <img src="https://storage.googleapis.com/zenn-user-upload/gxnwu3br83nsbqs873uibiy6fd43" width="250"
+          alt="altテキスト" loading="lazy" />
+      </a>
+      直後にテキストがある場合もスタイルの影響は受けません。
+    </p>
     <h2 id="テーブル">テーブル</h2>
     <div class="highlight">
       <pre class="highlight plaintext"><code>| Head | Head | Head |