position absolute を使って素材を特定の位置に決まったサイズで置きたい

前提・実現したいこと

3つ素材ABCを並べて動かしたい。

発生している問題・エラーメッセージ

素材自体のサイズが全て同じでwidhtも100％にしているのにA＞B＞Cの順のサイズになってします。
PCで見ると平気ですがスマホで見るとサイズが変わってしまいます。

該当のソースコード

css
1  @keyframes float1 {
2  0% {
3    transform: translatey(0px);
4  }
5  50% {
6    transform: translatey(-10px);
7  }
8  100% {
9    transform: translatey(0px);
10  }
11  }
12
13  #bg{
14  position: relative;
15   }
16
17  #a{
18    animation: float1 2s ease-in-out infinite;
19    position: absolute;
20    float: left;
21    left:27%;
22    top:63.27%;
23    transition-duration: 0.1s;
24     margin:auto auto;
25  }
26  #b{
27    animation: float1 2s 0.2s ease-in-out infinite;
28    position: absolute;
29    float: left;
30    left:50%;
31    top:63.27%;
32     margin:auto auto;
33  }
34  #c{
35    animation: float1 2s ease-in-out infinite;
36    position: absolute;
37    float: left;
38    left:72%;
39    top:63.27%;
40     margin:auto auto;
41  }

HTML
1　
2  <div class="main">
3    <div  class="cf" id="bg"><img src="#" alt="" width="100%"></div> <!--実際のサイズは横900px-->
4    <div  class="cf" id="a"><img src="#" alt="" width="100%"></a></div><!--実際のサイズは縦横200px-->
5    <div  class="cf" id="b"><img src="#" alt="" width="100"></a></div><!--実際のサイズは縦横200px-->
6    <div  class="cf" id="c"><img src="#" alt="" width="100%"></a></div><!--実際のサイズは縦横200px-->
7  </div>

miyabi_pudding

2019/01/09 00:39

画像でも構いませんので、実際表示されている画面を掲示していただけないでしょうか？それと、HTML、CSS含め前後のソースコードも記載してください。おそらく、このソースコードだけだと解決できないような気がします。

kana0701

2019/01/09 00:50

コメントありがとうございます。画像とソースコード追加しました。ソースコードですが前後にはこのコードしかありません。

miyabi_pudding

2019/01/09 00:52

画像の掲示、ソースコードの修正、ありがとうございます！ ABC、どれも同じ大きさに見えるのですが・・・、問題が出ているスマホでの画像は掲示できないでしょうか？

kana0701

2019/01/09 01:23

すみませんそれは実現したい画像です。問題が起きているものはスクショしたのですが重いのか反映できませんでした。 AはCの４倍位の大きさになっています。

kana0701

2019/01/09 01:28

低画質にしたら載せられました！よろしくお願いします。

yoshinavi

2019/01/09 03:14

HTMLのコードはこれで正しいのでしょうか？「position: absolute;」と「float」を同時使用していますが、どのような狙いですか？「#bg」に「position: relative;」がありますが「#a」「#b」「#c」の親ではないので、「.main」「.cf」のCSSも提示してください。

行動規範の内容に同意します

回答1件

ベストアンサー

まず、imgのwidh属性なり、cssでwidth: 100%;を利かせるなりしたとき、
親要素に対しての%の大きさとなりますが、
今回のケースの場合、
ブロック、#a、#b、#cに対して大きさを指定していないので、
そのブロックの大きさがautoになっているわけです。
（基本横幅は100%になるが、absoluteをきかせているため、最低値0のautoの大きさになる）

それなのに、left値を設定しているため、
その値分、要素の大きさが縮まり、その子要素のimgも縮まっているのでしょう。

よって、#a、#b、#cに対して、具体的な大きさを指定しましょう。
%なり、vwを使うなりで、解決するかと思います。
（PCも共通のCSSを使うのなら、%の方がいいでしょう）

css
1#a,#b,#c { width: 33%; max-width: 200px;}

max-widthを指定しているのは、PCでは、200px以上としないためです。（画像の大きさに合わせている）
現存のスマホでは、横幅が200pxでデバイスの横幅30%以下になるデバイスはないかと思うので、（横向きにしない限り）
これで要件を満たせるかと思います。

PCではなぜ現象が起きなかったのかは、少々疑問が残りますが、
おそらく、親divに対しての画像の大きさが、小さいため、
ブロック#a、#b、#Cの大きさが200px以上にならなかったためかと思います。

投稿2019/01/09 01:52

編集2019/01/09 02:25

miyabi_pudding

総合スコア9528

kana0701

2019/01/09 02:13

詳しい解説ありがとうございます！初心者のためとても理解しやすくて助かります。よって、#a、#b、#cに対して、具体的な大きさを指定しましょう。 %なり、vwを使うなりで、解決するかと思います。（PCも共通のCSSを使うのなら、%の方がいいでしょう）なのですが、％を使って指定しようと思うのですが具体的な大きさとはどういうことでしょうか？ widht以外で指定するということでしょうか？