解決したいことなんで親要素から画像はみ出るの？（works,cultureのところ）発生している問題・エラー html <div class="medias"> ...

@dddddddddddd (陸加治屋)posted at 2022-04-14

imgタグが親要素からはみ出す

Q&A

Closed

HTML CSS

解決したいこと

なんで親要素から画像はみ出るの？（works,cultureのところ）

発生している問題・エラー

html

 <div class="medias">
        <section class="media-colum medias__media-colum">
          <h2>WORKS</h2>
          <figure><img class="media-colum__img" src="img/works-img.png" alt=""></figure>
          <p>DIGSMILEの制作実績を紹介します。 </p>
          <a class="btn" href="">READ MORE</a>
        </section>

        <section class="media-colum medias__media-colum">
          <h2>CULTURE</h2>
          <figure><img class="media-colum__img" src="img/culture-img.png" alt=""></figure>
          <p>DIGSMILEの社内文化について紹介します。</p>
          <a class="btn" href="">READ MORE</a>
        </section>
      </div>

css　sass

.img {
  max-width: 100%;
  height: auto;
}

.medias{
  display: flex;
  gap: calc(60/1100*100%);
  &__media-colum{
    flex-shrink: 1;
  }
}

自分で試したこと

ここに問題・エラーに対して試したことを記載してください。

1Answer

@YottyPG posted at 2022-04-15

「img」のクラス指定になっているため、画像に対してスタイルが効いていないように思われます。

- .img {
+ img {
  max-width: 100%;
  height: auto;
}

もしくは

- .img {
+ .media-colum__img {
  max-width: 100%;
  height: auto;
}

0Like

Are you sure you want to delete the question?

imgタグが親要素からはみ出す

解決したいこと

発生している問題・エラー

自分で試したこと

1Answer

Your answer might help someone💌