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

回答編集履歴

1

ソースコード内のコメントを修正、など

2020/03/09 23:21

投稿

new1ro
new1ro

スコア4528

answer CHANGED
@@ -4,11 +4,11 @@
4
4
  .owl-item > div {
5
5
  width: 100%;
6
6
  padding-bottom: 100%; /* padding-bottomへの%指定は、横幅に対して何%か、という意味 */
7
- height: 0px;
7
+ height: 0; /* padding-bottomだけで高さを指定したいので「0」にする */
8
8
  position: relative;
9
9
  }
10
10
  .owl-item > div > a {
11
- display: block; /* とりあえずblock。プラグインで指定されている場合は不要 */
11
+ display: block;
12
12
  width: 100%;
13
13
  height: 100%;
14
14
  position: absolute;
@@ -16,14 +16,15 @@
16
16
  left: 0;
17
17
  }
18
18
  .owl-item > div > a img {
19
- display: block; /* とりあえずblock。プラグインで指定されている場合は不要 */
19
+ display: block;
20
20
  width: 100%;
21
21
  height: 100%;
22
+ border-radius: 50%;
22
23
  }
23
24
  ```
24
25
 
25
- なおpadding-bottomに%指定し、縦操作するテクニックは、
26
+ padding-bottomに%指定し幅に対して高さが何%か」指定するテクニックは、
26
- YouTube動画埋め込みのレスポンシブ時の表示のシチュエーションでもよく使われるものを応用しています。
27
+ YouTube動画埋め込みのレスポンシブ時の表示のシチュエーションでもよく使われるものす。
27
28
 
28
29
  参考URL:
29
30
  [https://qiita.com/FJHoshi/items/11684c352aebc8d4f87b](https://qiita.com/FJHoshi/items/11684c352aebc8d4f87b)