isara 画像レスポンシブについて

Question

分からない点　➔　画像の下に少しだけ同じ画像が繰り返される

閲覧ありがとうございます。
私は今、isaraの模写コーディングをしているのですが、
isaraの画像の下とオレンジの枠の間に
微妙な隙間が出来て、画像が一部分が繰り返されて表示されてしまいました。

一応、 background-size: cover;　と　background-repeat: no-repeat;は
対象のimgと囲っているdivに書いているのですが、微妙に隙間が空いて
繰り返されてしまっています。
対処方法を分かる方いらっしゃいましたら教えて頂けませんでしょうか。

  <div class="example">
    <img src="images/main.jpg" alt="メインヴィジュアル">
    <div class="text_area">
      <p>プログラミングで<br>
        人生の安定を手にいれよう</p>
      <div class="isara"><img src="images/isaralogolarge.png" alt="メインヴィジュアル画像"></div>
      <p>バンコクのノマドエンジニア育成講座iSara[イサラ]</p>
    </div>
  </div>

.example {
  position: relative;
  background-image: url(images/main.jpg);
  background-size: cover;
  background-repeat: no-repeat;
}

.example >img {
  min-height: 310px;
  width:100%;
  max-width: 100%;
  height: auto;
  background-repeat: no-repeat;
  background-size: cover
}

Comments

[cerfweb]

.exampleの親要素はどんな構造になっていますか。

[nakayamaakg]

.exampleの親要素は
.conversion {
width: 424px;
height: 473px;
margin: 0 auto;
}というdivのクラスで囲っておりました。

ただ、下のコメントに指摘があったととおり
背景画像を表示させるコードを２つ記載していたので
HTMLの<img src="images/main.jpg" alt="メインヴィジュアル">を残して
CSSの.exampleの、background-image: url(images/main.jpg);を消したところ
下に表示されなくなりました。その為、一旦疑問が解消できました。
コメント頂きありがとうございました。

Answer 1

ackground-image: url(images/main.jpg);で背景画像を表示させているので、
<img src="images/main.jpg" alt="メインヴィジュアル">が不要では。

Comments

[nakayamaakg]

指摘頂いたとおり、背景画像を表示させるコードを２つ記載していたので
HTMLの<img src="images/main.jpg" alt="メインヴィジュアル">を残して
CSSの.exampleの、background-image: url(images/main.jpg);を消したところ
下に表示されなくなりました。その為、一旦疑問が解消できました。
コメント頂き大変ありがとうございました。

[hatena19]

レスポンシブ対応にするなら、背景画像は残してimgタグの方を削除した方か対応しやすいと思う。

ちなみに、imgに
background-repeat: no-repeat;
background-size: cover
の設定は無意味。

[nakayamaakg]

ありがとうございます。
今仰って頂いたとおり背景画像は残してimgタグの方を削除したのですが
レスポンシブサイズ480×500くらいで、真ん中の白い靄が右側を埋めるような画面になってしまいました。CSSの設定は以下に設定しているのですが対処方法がどうしたらよいかご存じでしょうか。。

.example {
background-image: url(images/main.jpg);
background-size: auto 500px;;
position: relative;
background-size: cover;
background-repeat: no-repeat;
width: 100%;
min-height: 310px;
}

[hatena19]

background-position: center;
を追加すればいいでしょう。

[nakayamaakg]

コメントありがとうございます。
すいません。確かにbackground-position: center;で中央配置となるですが
画像が100％表示を目標としていたので、てこ入れしたいです。。
<img src="images/main.jpg" alt="メインヴィジュアル">にwith:100%をしていた時と同じように
background-image: url(images/main.jpg);の画像を100％表示させるにはどうしたらよいでしょうか。

[hatena19]

その方法だと画面幅によって高さが変化しますが、それでいいのなら、img画像で表示させて、背景画像は削除すればいいでしょう。
ただ、isaraの方は背景画像で高さ固定（height: 500px;）にしてますので、模写コーディングにはならないですけどね。