要素からはみ出る画像のズレを修正する

Question

「自分のもの」

このように、ピンクの大きな要素の中から「写真」がそれぞれはみ出てしまっています。写真の要素を、ピンクの枠の中に収める事はできないでしょうか？
解決策をご提示していただけると嬉しいです。
以下のコードは、「自分のもの」の写真のうち、左端のチューブだけについてのコードです。

<div id="Series-65" class="products-item swiper-slide-duplicate" >
      <a href="#">
       <p class="products-item-update">UPDATE</p>
        <figure class="products-item-img">
      <!--これがはみ出る写真その１-->
         <img src="edol_sum-1.jpg">
        </figure>
        <div class="products-item-head">
         <h3 class="products-item-ttl">edol</h3>
          <ul class="products-item-category u-display-pc">
           <li>COLOR</li>
           <li>HAIR COLOR</ii>
          </ul>
        </div>
        <p class="products-item-txt">
        「赤み」に縛られない自在なクリエイティブを表現するヘアカラーシリーズ
        </p>
      <!--
         <ul class="products-item-category u-display-sp">
          <li>COLOR</li>
          <li>HAIR CARE</li>
         </ul>
      -->
      </a>
     </div>

.products-item {
  width: 340px;
  margin: 0 40px;
}



.products-item {
    position: relative;
    flex: 0 0 auto;
    background-color: pink;
}

.products-item-img {
  width: 100%;
  width: 340px;
  overflow: hidden;
}

.products-item-img img {
  width: 100%;
    max-width: none;
    transition: transform .9s cubic-bezier(.19,1,.22,1)
}

.products-item-head {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.products-item-ttl {
  font-size: 10px;
  font-family: StoneSansITCPro-Medium,Avenir,sans-serif;
  line-height: 1.4
}



.products-item-category {
  display: flex;
  flex-wrap: wrap;
}

.products-item-txt {
  font-size: 10px;
}

Answer 1

コードが部分的なので、これで解消するかどうかわかりませんが

figure {
    margin: 0;
}

これで解消しないでしょうか。

現在画像の左側に余白ができているのは、ブラウザのデフォルトの余白だと思うので
figureタグをセレクタとして余白リセットしておくのが良いと思います。

[CSS]ページのレイアウトで、意図せずできてしまった隙間の原因とその解決方法のまとめ

画像の左右に余白を付けたい場合は、.products-itemにbox-sizing: border-box;かけたうえでpadding設定してみてください。

Comments

[sun-chan]

ブラウザのデフォルトの余白があるのは知らなかったです。
無事に修正できました。今後もこれを利用していきます。
記事も添付してくださりありがとうございました！

[mai1210]

chromeの場合になりますが、デベロッパーツールで要素を確認した時に

・斜体がかかっていて
・css名のところに「user agent stylesheet」と記載されている（自分で読み込んでいるCSSではない）

ものは、ブラウザ側が勝手に付けているスタイルです。（やっかいなことにブラウザによって異なります）

毎回打ち消しても良いですが、リセットCSSとして最初に一旦タグごとリセットしておくと楽です。
ブラウザのデフォルトスタイルを一気に消し込んでくれるリセットCSSがたくさん公開されているので、公開されているものをそのまま使うも良し、自分のサイトに必要そうな部分だけ持ってくるも良し、です。

Answer 2

画像をfigureタグで囲んでますが、そのブラウザデフォルトのマージンのせいでずれてます。
これを打ち消せばいいでしょう。

.products-item-img {
  width: 100%;
  width: 340px;
  overflow: hidden;
  margin: 0; /* 追加 */
}

Comments

[sun-chan]

marginを０にしたところ、無事解決できました！
教えて頂きありがとうございました！