質問編集履歴
7
説明の変更
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -94,10 +94,10 @@
|
|
|
94
94
|
```
|
|
95
95
|
```html
|
|
96
96
|
<div id="photo">
|
|
97
|
-
<img src="images/201812230.JPG" width="auto" height="400">
|
|
98
|
-
<img src="images/201812232.JPG" width="auto" height="400">
|
|
99
|
-
<img src="
|
|
97
|
+
<img src="gazou1.jpg" width="auto" height="400">
|
|
100
|
-
<img src="
|
|
98
|
+
<img src="gazou2.jpg" width="auto" height="400">
|
|
99
|
+
<img src="gazou3.jpg" width="auto" height="400">
|
|
100
|
+
<img src="gazou4.jpg" width="auto" height="400">
|
|
101
101
|
</div>
|
|
102
102
|
```
|
|
103
103
|
|
6
説明の変更
title
CHANGED
|
@@ -1,1 +1,1 @@
|
|
|
1
|
-
画像を画面の幅に対して中央に配置したい。
|
|
1
|
+
画像を画面の幅に対して中央に端が切れずに配置したい。
|
body
CHANGED
|
@@ -50,16 +50,17 @@
|
|
|
50
50
|
</div>
|
|
51
51
|
```
|
|
52
52
|
|
|
53
|
-
元のものは↑で、これを横幅を固定、縦幅はautoというものは画像が中央に配置され、問題なく表示されましたが、縦幅を固定、横幅はautoにすると
|
|
53
|
+
元のものは↑で、これを横幅を固定、縦幅はautoというものは画像が中央に配置され、問題なく表示されましたが、縦幅を固定、横幅はautoにするとスマホで見た時に右端が切れて表示されています。
|
|
54
54
|
### 該当のソースコード
|
|
55
55
|
|
|
56
56
|
```JS
|
|
57
57
|
<style type="text/css">
|
|
58
58
|
#photo {
|
|
59
59
|
max-width: auto;
|
|
60
|
-
height:
|
|
60
|
+
height: 400px;
|
|
61
|
+
|
|
61
|
-
|
|
62
|
+
margin: 0 auto;
|
|
62
|
-
text-align:
|
|
63
|
+
text-align: center;
|
|
63
64
|
overflow: hidden;
|
|
64
65
|
position: relative;
|
|
65
66
|
}
|
|
@@ -92,11 +93,12 @@
|
|
|
92
93
|
</script>
|
|
93
94
|
```
|
|
94
95
|
```html
|
|
95
|
-
|
|
96
|
+
<div id="photo">
|
|
97
|
+
<img src="images/201812230.JPG" width="auto" height="400">
|
|
98
|
+
<img src="images/201812232.JPG" width="auto" height="400">
|
|
96
|
-
<img src="
|
|
99
|
+
<img src="images/201905181.jpg" width="auto" height="400">
|
|
97
|
-
<img src="
|
|
100
|
+
<img src="images/201905183.jpg" width="auto" height="400">
|
|
98
|
-
<
|
|
101
|
+
</div>
|
|
99
|
-
<img src="gazou4.jpg" width="auto" height="330">
|
|
100
102
|
```
|
|
101
103
|
|
|
102
104
|
↑に載せている画像の本来の大きさは
|
|
@@ -106,8 +108,16 @@
|
|
|
106
108
|
4枚目 631×484
|
|
107
109
|
になります。
|
|
108
110
|
|
|
109
|
-
当初、横を500pxで縦をautoの設定にしていた時は画
|
|
111
|
+
当初、横を500pxで縦をautoの設定にしていた時はスマホの画面で見ても、写真の右端が切れることはなかったのですが、横をautoにして縦を400pxに切り替えたところ、スマートフォンで見た時に写真の右端が切れて表示されるようになってしまいました。
|
|
110
112
|
|
|
111
113
|
### 試したこと
|
|
114
|
+
```JS
|
|
115
|
+
#photo img {
|
|
116
|
+
width: auto;
|
|
117
|
+
height: 100%;
|
|
118
|
+
}
|
|
119
|
+
```
|
|
120
|
+
の高さを400pxに指定してみたりはしましたが、右端が切れる現象は変わりませんでした。
|
|
112
121
|
|
|
122
|
+
12月31日9時現在のタグに修正しました。
|
|
113
|
-
|
|
123
|
+
2つのページで使おうと思っていまして、全く同じタグなのですが、1つのページでは写真が中央に配置され、スマホの画面で見ても右端は切れていないのですが、もう1つのページでは写真の右端が切れているので、右端が切れている方のタグを掲載しました。
|
5
説明の変更
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -106,7 +106,7 @@
|
|
|
106
106
|
4枚目 631×484
|
|
107
107
|
になります。
|
|
108
108
|
|
|
109
|
-
当初、横を500pxで縦をautoの設定にしていた時は画像は全ての画像が真ん中に配置されたまま画像が切り替わっていたのですが、横をautoにして縦を300pxに切り替えたところ、どこか設定が終わっていないところがあるのか、左寄せで写真が
|
|
109
|
+
当初、横を500pxで縦をautoの設定にしていた時は画像は全ての画像が真ん中に配置されたまま画像が切り替わっていたのですが、横をautoにして縦を300pxに切り替えたところ、どこか設定が終わっていないところがあるのか、左寄せかつ、スマートフォンで見た時に写真の右端が切れて表示されるようになってしまいました。
|
|
110
110
|
|
|
111
111
|
### 試したこと
|
|
112
112
|
|
4
レイアウト変更
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -97,6 +97,7 @@
|
|
|
97
97
|
<img src="gazou2.jpg" width="auto" height="330">
|
|
98
98
|
<img src="gazou3.jpg" width="auto" height="330">
|
|
99
99
|
<img src="gazou4.jpg" width="auto" height="330">
|
|
100
|
+
```
|
|
100
101
|
|
|
101
102
|
↑に載せている画像の本来の大きさは
|
|
102
103
|
1枚目 3264×2448
|
|
@@ -107,7 +108,6 @@
|
|
|
107
108
|
|
|
108
109
|
当初、横を500pxで縦をautoの設定にしていた時は画像は全ての画像が真ん中に配置されたまま画像が切り替わっていたのですが、横をautoにして縦を300pxに切り替えたところ、どこか設定が終わっていないところがあるのか、左寄せで写真が載るようになってしまいました。
|
|
109
110
|
|
|
110
|
-
```
|
|
111
111
|
### 試したこと
|
|
112
112
|
|
|
113
113
|
leftと書かれたところをcenterやrightに書き換えてみたりはしましたが、画像は中央に配置されず、スマホで見ると右側の画像が切れて載っています。
|
3
質問者からの追記に対応。
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -97,6 +97,16 @@
|
|
|
97
97
|
<img src="gazou2.jpg" width="auto" height="330">
|
|
98
98
|
<img src="gazou3.jpg" width="auto" height="330">
|
|
99
99
|
<img src="gazou4.jpg" width="auto" height="330">
|
|
100
|
+
|
|
101
|
+
↑に載せている画像の本来の大きさは
|
|
102
|
+
1枚目 3264×2448
|
|
103
|
+
2枚目 1000×794
|
|
104
|
+
3枚目 857×584
|
|
105
|
+
4枚目 631×484
|
|
106
|
+
になります。
|
|
107
|
+
|
|
108
|
+
当初、横を500pxで縦をautoの設定にしていた時は画像は全ての画像が真ん中に配置されたまま画像が切り替わっていたのですが、横をautoにして縦を300pxに切り替えたところ、どこか設定が終わっていないところがあるのか、左寄せで写真が載るようになってしまいました。
|
|
109
|
+
|
|
100
110
|
```
|
|
101
111
|
### 試したこと
|
|
102
112
|
|
2
試したことの追加
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -100,4 +100,4 @@
|
|
|
100
100
|
```
|
|
101
101
|
### 試したこと
|
|
102
102
|
|
|
103
|
-
leftと書かれたところをcenterやrightに書き換えてみたりはしましたが、
|
|
103
|
+
leftと書かれたところをcenterやrightに書き換えてみたりはしましたが、画像は中央に配置されず、スマホで見ると右側の画像が切れて載っています。
|
1
前提・実現したいことの追加
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
### 前提・実現したいこと
|
|
2
2
|
|
|
3
3
|
[テンプレート](http://toretama.jp/automatic-animation-image-floaty.html)
|
|
4
|
-
↑のテンプレートを利用して、高さを固定、幅を自動にした写真を画面の中央に配置したい。
|
|
4
|
+
↑のテンプレートを利用して、高さを固定、幅を自動にした写真を画面の中央に配置し、スマホで見た時にも画像が切れずに表示されるようにしたい。
|
|
5
5
|
|
|
6
6
|
### 発生している問題・エラーメッセージ
|
|
7
7
|
|