画像(imgタグ)が親要素からはみ出したので対処した

概要

Next.js + microCMSでブログを作成していますが、画像(imgタグ)が親要素からはみ出してしまったので、それの対処をします。
対処方法としては、画像のはみ出た部分をスクロールで表示するようにしました。

ゴール

画像のはみ出た部分をスクロールで表示できるようにする。

作成物

手順

現状確認

事象としては、以下のように親要素のwidthが小さい時に、画像がはみ出してしまいます。
imgタグの親要素はpタグのようです

親要素(pタグ)にClassの追加

親要素(pタグ)に、CSSを適用するために、Classを追加していきます。
HTMLのパーサには、cheerio を使っています。
以下のように、imgタグを子要素に持ったpタグに対して、pHasImgClassを追加しました。

import { GetStaticPaths, GetStaticProps, InferGetStaticPropsType, NextPage } from 'next';
import cheerio from 'cheerio';

// 中略

export const getStaticProps: GetStaticProps<Props, Params> = async (context) => {
  const id = context.params?.id;
  const blog = await client.get({ endpoint: 'blog', contentId: id });

// 中略

  $('p:has(img)').each((_, elm) => {
    $(elm).html();
    $(elm).addClass('pHasImg');
  });

  return {
    props: {
      blog: { ...blog, body: $.html() },
    },
  };
};

CSSの適用

画像をスクロールさせたいので、imgタグの親要素に、overflow: auto;を適用します。
CSS in JSのフレームワークにはEmotionを利用しているので、EmotionのGlobalタグを利用して、pHasImgクラスにCSSを適用します。

// 中略

const BlogId: NextPage<InferGetStaticPropsType<typeof getStaticProps>> = ({ blog }: Props) => {
  return (
    <div>
      <Global
        styles={css`
          .pHasImg {
            overflow: auto;
          }
        `}
      />

// 中略

上記で完了です。
画像がスクロールしてくれるようになりました。