質問編集履歴

5

追記

2018/08/22 17:41

投稿

_sz
_sz

スコア21

test CHANGED
File without changes
test CHANGED
@@ -8,7 +8,19 @@
8
8
 
9
9
  **【悩んでいること】**
10
10
 
11
+ **①**
12
+
13
+ テキストの横幅を、画像の親要素に指定すれば解決しそうですが、
14
+
15
+ その後テキストの長さが変わる可能性を考慮すると、この方法はあまり良くないように思えます。
16
+
17
+
18
+
19
+
20
+
21
+ **②**
22
+
11
- テキストの横幅をvwで画像の親要素に指定した場合、
23
+ 「①」の方法を取ったとしても、テキストの横幅をvwで画像の親要素に指定した場合、
12
24
 
13
25
  スマホの画面で見ると、画像がテキストの横幅からはみ出してしまいます。
14
26
 

4

追記

2018/08/22 17:41

投稿

_sz
_sz

スコア21

test CHANGED
File without changes
test CHANGED
@@ -36,7 +36,7 @@
36
36
 
37
37
 
38
38
 
39
- **▼スマホ横画面 がっつりはみ出ている**
39
+ **▼スマホ横画面 機種に関わらず、がっつりはみ出ている**
40
40
 
41
41
  ![イメージ説明](2f8a5793bcd2ce30078a30666096898c.png)
42
42
 

3

補足修正

2018/08/22 15:28

投稿

_sz
_sz

スコア21

test CHANGED
File without changes
test CHANGED
@@ -14,7 +14,7 @@
14
14
 
15
15
  ※スマホ用サイトのため、vwの方が良いのでは?と思いvwで指定しています。
16
16
 
17
- (実物は余白もvwで指定しています)
17
+ 下記ダミーの余白はpxですが、実物は余白もvwで指定しています)
18
18
 
19
19
 
20
20
 

2

vwで指定 画像添付

2018/08/22 15:27

投稿

_sz
_sz

スコア21

test CHANGED
File without changes
test CHANGED
@@ -6,21 +6,15 @@
6
6
 
7
7
 
8
8
 
9
- **【現状】**
10
-
11
- ・テキストよりも画像の方が大きいため、テキストの横幅からはみ出す
12
-
13
-
14
-
15
9
  **【悩んでいること】**
16
10
 
17
- テキストの横幅を画像の親要素に指定すれば済む話なのですが
11
+ テキストの横幅をvwで画像の親要素に指定した場合
18
12
 
19
- テキトが長くなった場合にも、画像の幅もテキストと同じになっしいため
13
+ マホの画面で見ると、画像テキストの横からはみ出してします。
20
14
 
21
- 現在のテキストの幅を画像親要素にpxなどで指定できせん
15
+ マホ用サイトのためvw方が良いのは?と思いvwで指定してい
22
16
 
23
- 何か良い方法がありまたら、教えていただけますと幸いです。
17
+ (実物は余白もvwで指定しています
24
18
 
25
19
 
26
20
 
@@ -28,13 +22,23 @@
28
22
 
29
23
  **【参考画像】**
30
24
 
31
- 上…テキストの幅を画像の親要素に指定した場合(実現したレイアウト)
25
+ の青い四角…テキストの幅をvwで画像の親要素に 指定し
32
26
 
33
- 下…テキストの幅を画像の親要素に指定しない場合(現状)
27
+ の青い四角…テキストの幅をvwで画像の親要素に 指定していない
34
28
 
35
29
 
36
30
 
31
+ **▼スマホ縦画面 機種(スマホスクリーンの幅)が変わると崩れてしまう**
32
+
33
+ ![イメージ説明](463a2ff0fdb88a93b168599e4ae3691c.png)
34
+
37
- ![イメージ説明](ec265e963d45d8c1e11ead333732c153.png)
35
+ ![イメージ説明](82000f6fe1ce8dab020ed510aca55336.png)
36
+
37
+
38
+
39
+ **▼スマホ横画面 がっつりはみ出ている**
40
+
41
+ ![イメージ説明](2f8a5793bcd2ce30078a30666096898c.png)
38
42
 
39
43
 
40
44
 
@@ -126,7 +130,7 @@
126
130
 
127
131
  .inner img {
128
132
 
129
- width: 100%;
133
+ width: 27.1vw;
130
134
 
131
135
  }
132
136
 
@@ -142,4 +146,8 @@
142
146
 
143
147
 
144
148
 
149
+ 以上になります。
150
+
151
+ 何か良い方法がありましたら、教えていただけますと幸いです。
152
+
145
- 以上になります。よろしくお願いいたします…!
153
+ よろしくお願いいたします…!

1

質問タイトルの修正

2018/08/22 15:24

投稿

_sz
_sz

スコア21

test CHANGED
@@ -1 +1 @@
1
- 兄弟要素(img)の横幅を、短い方に揃える方法
1
+ 兄弟要素の横幅を、短い方に揃える方法
test CHANGED
File without changes