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

回答編集履歴

4

修正

2020/05/07 23:28

投稿

new1ro
new1ro

スコア4528

answer CHANGED
@@ -1,3 +1,7 @@
1
+ いくつか考えてみました。
2
+
3
+ ---
4
+ [1]
1
5
  横長の枠に、縦長の画像を表示しようとすると拡大表示される、と見えることはあると思います。
2
6
 
3
7
  ↓`background-size: contain;`の場合: 画像は枠のなかに収まる = 適正なサイズに見える
@@ -9,11 +13,17 @@
9
13
  ![イメージ説明](daae7a59a06f2e33f3ed064260b6ca72.jpeg)
10
14
 
11
15
  ---
16
+ [2]
12
17
  Chromeで試してみたところ関係なさそうでしたが、
13
18
  「Background-size:cover」「B」が大文字なので、IEあたりでバグが生じそうな気がします。
14
19
  私は怖くて「Background-size:cover」とは書けないです。
15
20
 
16
21
  ---
22
+ [3]
23
+ `background-size: cover;`を指定した要素の横幅が4000pxなど何らかの原因で大きくなってしまっている場合、背景画像の横幅は4000pxになるので拡大してしまっている状態になることはあると思います。
24
+ `background-size: cover;`は画面サイズいっぱいに広がる、という意味ではなく指定した要素のサイズいっぱいに広がる、という意味なので。
25
+
26
+ ---
17
27
  > 元画像のファイルの大きさ自体が大きすぎるのでしょうか。
18
28
 
19
29
  「background-size」の設定がきちんとできていれば無関係のはずです。

3

修正

2020/05/07 23:28

投稿

new1ro
new1ro

スコア4528

answer CHANGED
@@ -1,11 +1,11 @@
1
1
  横長の枠に、縦長の画像を表示しようとすると拡大表示される、と見えることはあると思います。
2
2
 
3
- ↓`background-size: contain;`の場合
3
+ ↓`background-size: contain;`の場合: 画像は枠のなかに収まる = 適正なサイズに見える
4
4
  ![イメージ説明](c25dcabf92229b6d90eba29c8c46415f.jpeg)
5
5
 
6
6
  ---
7
7
 
8
- ↓`background-size: cover;`の場合
8
+ ↓`background-size: cover;`の場合: 画像は枠のなかからはみ出る = 拡大してしまっているように見えるかも
9
9
  ![イメージ説明](daae7a59a06f2e33f3ed064260b6ca72.jpeg)
10
10
 
11
11
  ---

2

修正。

2020/05/07 23:24

投稿

new1ro
new1ro

スコア4528

answer CHANGED
@@ -11,4 +11,10 @@
11
11
  ---
12
12
  Chromeで試してみたところ関係なさそうでしたが、
13
13
  「Background-size:cover」「B」が大文字なので、IEあたりでバグが生じそうな気がします。
14
- 私は怖くて「Background-size:cover」とは書けないです。
14
+ 私は怖くて「Background-size:cover」とは書けないです。
15
+
16
+ ---
17
+ > 元画像のファイルの大きさ自体が大きすぎるのでしょうか。
18
+
19
+ 「background-size」の設定がきちんとできていれば無関係のはずです。
20
+ 全角文字が紛れ込んでいる、というミスも含めて「background-size」の設定が効いていないときは、画像サイズがそのまま表示されるので大きくなってしまうことはあり得ます。

1

修正

2020/05/07 23:21

投稿

new1ro
new1ro

スコア4528

answer CHANGED
@@ -6,4 +6,9 @@
6
6
  ---
7
7
 
8
8
  ↓`background-size: cover;`の場合
9
- ![イメージ説明](daae7a59a06f2e33f3ed064260b6ca72.jpeg)
9
+ ![イメージ説明](daae7a59a06f2e33f3ed064260b6ca72.jpeg)
10
+
11
+ ---
12
+ Chromeで試してみたところ関係なさそうでしたが、
13
+ 「Background-size:cover」「B」が大文字なので、IEあたりでバグが生じそうな気がします。
14
+ 私は怖くて「Background-size:cover」とは書けないです。