teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

2

画像の表示箇所についてbackgroundの時に見せたい部分が一定である旨を追加資料で説明します

2021/02/17 08:34

投稿

21120903ryosuke
21120903ryosuke

スコア7

title CHANGED
File without changes
body CHANGED
@@ -1,5 +1,4 @@
1
- 添付画像のように配置すべく
2
- ![イメージ説明](b0808c422c6e2df30f09f99028476747.jpeg)
1
+ ![イメージ説明](d03b3f09ec62688f5a87cd5e9afde2cf.jpeg)添付画像のように配置すべく
3
2
  以下のように記述してみたのですが、画像の上に文字と動画が回り込みません。
4
3
  添付画像のようにするための記述ミス等ございましたらご指摘、ご教授いただけますと幸いです。
5
4
  よろしくお願いします。※ちなみに動画は(スマホ比率)縦型で設置予定です。

1

backgroundにしてみた結果の問題点を追記しました。

2021/02/17 08:34

投稿

21120903ryosuke
21120903ryosuke

スコア7

title CHANGED
File without changes
body CHANGED
@@ -56,4 +56,23 @@
56
56
 
57
57
  }
58
58
  }
59
+ ```
60
+
61
+ backgroundにしてみたのですが、
62
+ ```css
63
+ .pc_bana{
64
+ display:block;
65
+ line-height: 0;
66
+ background:url("../img/new_pc_top_2.jpg")no-repeat;
67
+ background-size: contain;
68
+ }
69
+ ```
70
+
71
+ 当サイトレスポンシブサイトですが、ウインドウの拡大縮小の際、
72
+ new_pc_top_2.jpgの拡大縮小にあわせて、iframeも拡大縮小をされるようにしたいのですが、iframeの位置が固定されてしまい、一緒に拡大縮小されない点について解決希望です
73
+
74
+ ```html
75
+ <div class="youtube_pc">
76
+ <iframe width="auto" height="500" src="https://www.youtube.com/embed/test" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div><!-- kodawari_1/ -->
77
+ </div>
59
78
  ```