質問編集履歴
7
説明の変更
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -190,13 +190,13 @@
|
|
|
190
190
|
|
|
191
191
|
<div id="photo">
|
|
192
192
|
|
|
193
|
-
<img src="images/201812230.JPG" width="auto" height="400">
|
|
194
|
-
|
|
195
|
-
<img src="images/201812232.JPG" width="auto" height="400">
|
|
196
|
-
|
|
197
|
-
<img src="
|
|
193
|
+
<img src="gazou1.jpg" width="auto" height="400">
|
|
198
|
-
|
|
194
|
+
|
|
199
|
-
<img src="
|
|
195
|
+
<img src="gazou2.jpg" width="auto" height="400">
|
|
196
|
+
|
|
197
|
+
<img src="gazou3.jpg" width="auto" height="400">
|
|
198
|
+
|
|
199
|
+
<img src="gazou4.jpg" width="auto" height="400">
|
|
200
200
|
|
|
201
201
|
</div>
|
|
202
202
|
|
6
説明の変更
test
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
画像を画面の幅に対して中央に配置したい。
|
|
1
|
+
画像を画面の幅に対して中央に端が切れずに配置したい。
|
test
CHANGED
|
@@ -102,7 +102,7 @@
|
|
|
102
102
|
|
|
103
103
|
|
|
104
104
|
|
|
105
|
-
元のものは↑で、これを横幅を固定、縦幅はautoというものは画像が中央に配置され、問題なく表示されましたが、縦幅を固定、横幅はautoにすると
|
|
105
|
+
元のものは↑で、これを横幅を固定、縦幅はautoというものは画像が中央に配置され、問題なく表示されましたが、縦幅を固定、横幅はautoにするとスマホで見た時に右端が切れて表示されています。
|
|
106
106
|
|
|
107
107
|
### 該当のソースコード
|
|
108
108
|
|
|
@@ -116,11 +116,13 @@
|
|
|
116
116
|
|
|
117
117
|
max-width: auto;
|
|
118
118
|
|
|
119
|
-
height:
|
|
119
|
+
height: 400px;
|
|
120
|
-
|
|
120
|
+
|
|
121
|
+
|
|
122
|
+
|
|
121
|
-
|
|
123
|
+
margin: 0 auto;
|
|
122
|
-
|
|
124
|
+
|
|
123
|
-
text-align:
|
|
125
|
+
text-align: center;
|
|
124
126
|
|
|
125
127
|
overflow: hidden;
|
|
126
128
|
|
|
@@ -186,15 +188,17 @@
|
|
|
186
188
|
|
|
187
189
|
```html
|
|
188
190
|
|
|
189
|
-
|
|
191
|
+
<div id="photo">
|
|
192
|
+
|
|
190
|
-
|
|
193
|
+
<img src="images/201812230.JPG" width="auto" height="400">
|
|
194
|
+
|
|
195
|
+
<img src="images/201812232.JPG" width="auto" height="400">
|
|
196
|
+
|
|
191
|
-
<img src="g
|
|
197
|
+
<img src="images/201905181.jpg" width="auto" height="400">
|
|
192
|
-
|
|
198
|
+
|
|
193
|
-
<img src="g
|
|
199
|
+
<img src="images/201905183.jpg" width="auto" height="400">
|
|
194
|
-
|
|
200
|
+
|
|
195
|
-
<
|
|
201
|
+
</div>
|
|
196
|
-
|
|
197
|
-
<img src="gazou4.jpg" width="auto" height="330">
|
|
198
202
|
|
|
199
203
|
```
|
|
200
204
|
|
|
@@ -214,12 +218,28 @@
|
|
|
214
218
|
|
|
215
219
|
|
|
216
220
|
|
|
217
|
-
当初、横を500pxで縦をautoの設定にしていた時は画
|
|
221
|
+
当初、横を500pxで縦をautoの設定にしていた時はスマホの画面で見ても、写真の右端が切れることはなかったのですが、横をautoにして縦を400pxに切り替えたところ、スマートフォンで見た時に写真の右端が切れて表示されるようになってしまいました。
|
|
218
222
|
|
|
219
223
|
|
|
220
224
|
|
|
221
225
|
### 試したこと
|
|
222
226
|
|
|
223
|
-
|
|
227
|
+
```JS
|
|
228
|
+
|
|
224
|
-
|
|
229
|
+
#photo img {
|
|
230
|
+
|
|
231
|
+
width: auto;
|
|
232
|
+
|
|
233
|
+
height: 100%;
|
|
234
|
+
|
|
235
|
+
}
|
|
236
|
+
|
|
237
|
+
```
|
|
238
|
+
|
|
225
|
-
|
|
239
|
+
の高さを400pxに指定してみたりはしましたが、右端が切れる現象は変わりませんでした。
|
|
240
|
+
|
|
241
|
+
|
|
242
|
+
|
|
243
|
+
12月31日9時現在のタグに修正しました。
|
|
244
|
+
|
|
245
|
+
2つのページで使おうと思っていまして、全く同じタグなのですが、1つのページでは写真が中央に配置され、スマホの画面で見ても右端は切れていないのですが、もう1つのページでは写真の右端が切れているので、右端が切れている方のタグを掲載しました。
|
5
説明の変更
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -214,7 +214,7 @@
|
|
|
214
214
|
|
|
215
215
|
|
|
216
216
|
|
|
217
|
-
当初、横を500pxで縦をautoの設定にしていた時は画像は全ての画像が真ん中に配置されたまま画像が切り替わっていたのですが、横をautoにして縦を300pxに切り替えたところ、どこか設定が終わっていないところがあるのか、左寄せで写真が
|
|
217
|
+
当初、横を500pxで縦をautoの設定にしていた時は画像は全ての画像が真ん中に配置されたまま画像が切り替わっていたのですが、横をautoにして縦を300pxに切り替えたところ、どこか設定が終わっていないところがあるのか、左寄せかつ、スマートフォンで見た時に写真の右端が切れて表示されるようになってしまいました。
|
|
218
218
|
|
|
219
219
|
|
|
220
220
|
|
4
レイアウト変更
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -196,6 +196,8 @@
|
|
|
196
196
|
|
|
197
197
|
<img src="gazou4.jpg" width="auto" height="330">
|
|
198
198
|
|
|
199
|
+
```
|
|
200
|
+
|
|
199
201
|
|
|
200
202
|
|
|
201
203
|
↑に載せている画像の本来の大きさは
|
|
@@ -216,8 +218,6 @@
|
|
|
216
218
|
|
|
217
219
|
|
|
218
220
|
|
|
219
|
-
```
|
|
220
|
-
|
|
221
221
|
### 試したこと
|
|
222
222
|
|
|
223
223
|
|
3
質問者からの追記に対応。
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -196,6 +196,26 @@
|
|
|
196
196
|
|
|
197
197
|
<img src="gazou4.jpg" width="auto" height="330">
|
|
198
198
|
|
|
199
|
+
|
|
200
|
+
|
|
201
|
+
↑に載せている画像の本来の大きさは
|
|
202
|
+
|
|
203
|
+
1枚目 3264×2448
|
|
204
|
+
|
|
205
|
+
2枚目 1000×794
|
|
206
|
+
|
|
207
|
+
3枚目 857×584
|
|
208
|
+
|
|
209
|
+
4枚目 631×484
|
|
210
|
+
|
|
211
|
+
になります。
|
|
212
|
+
|
|
213
|
+
|
|
214
|
+
|
|
215
|
+
当初、横を500pxで縦をautoの設定にしていた時は画像は全ての画像が真ん中に配置されたまま画像が切り替わっていたのですが、横をautoにして縦を300pxに切り替えたところ、どこか設定が終わっていないところがあるのか、左寄せで写真が載るようになってしまいました。
|
|
216
|
+
|
|
217
|
+
|
|
218
|
+
|
|
199
219
|
```
|
|
200
220
|
|
|
201
221
|
### 試したこと
|
2
試したことの追加
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -202,4 +202,4 @@
|
|
|
202
202
|
|
|
203
203
|
|
|
204
204
|
|
|
205
|
-
leftと書かれたところをcenterやrightに書き換えてみたりはしましたが、
|
|
205
|
+
leftと書かれたところをcenterやrightに書き換えてみたりはしましたが、画像は中央に配置されず、スマホで見ると右側の画像が切れて載っています。
|
1
前提・実現したいことの追加
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
|
|
5
5
|
[テンプレート](http://toretama.jp/automatic-animation-image-floaty.html)
|
|
6
6
|
|
|
7
|
-
↑のテンプレートを利用して、高さを固定、幅を自動にした写真を画面の中央に配置したい。
|
|
7
|
+
↑のテンプレートを利用して、高さを固定、幅を自動にした写真を画面の中央に配置し、スマホで見た時にも画像が切れずに表示されるようにしたい。
|
|
8
8
|
|
|
9
9
|
|
|
10
10
|
|