- 締切済み
スマホサイトの画像がandroidでバラバラになる
スマホサイトのコーディングをしています。画像のwidthやらカラムのwidthやらを％で指定しないといけないのですが、 ある箇所の画像が全て同じ大きさで、cssの指定も全て同じはずなのにAndroidのみで大きさがバラバラになっているのです。 iPhoneやpcでChromeで見たときは全て大きさが揃っているのに。 どんな理由が考えられるでしょうか？ ちなみにcssの最初にimgを全て100％に指定してからそれぞれの画像が入るdivなどの横幅を50％とかに設定して、その中の画像を囲んでいるdivのwidthを25％とか見た目を確認しながら変えています。 助けてください！
- newidles
- お礼率13% (22/161)
- CSS
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- y_shimizu
- ベストアンサー率41% (27/65)
本当に画像サイズがすべて同じであるならば、画像のせいじゃないでしょうね。 添付のキャプチャを見る限りだとwidthよりheight（親要素の）が気になりますが・・・。 何か親要素の高さが詰まってしまっててそれが子要素の高さを奪ってて、結果、画像が小さくなってるように見えます。
関連するQ&A
- 画像を中心に配置したい
画像の上下にも背景色を表示したいですが、うまくできません。 横幅は<align="center">で指定できたのですが、上下は・・・。 HTML、CSS、画像ファイル（gazou1.jpg）全て同じ階層にあります。 ・HTML <div class="gazou" align="center"><img src="gazou1.jpg"></div> ・CSS div.main { width: 100%; background-color: green }
- ベストアンサー
- CSS
- cssで、imgタグに、背景画像を敷きたい
cssで、imgタグに、背景画像(影)を敷く方法を教えてください。 ※divタグに敷く方法は分かるのですが、imgタグに敷く方法が分かりません。 ■現状 ＜HTML＞ <div id="hoge"> <img src～ ＜CSS＞ #hoge img { background-image:url(/images/background_shodow.jpg); background-repeat: none; background:position: ？ width:？ height:？ margin:？ padding:？; ＜影の大きさ＞ ・width400px ・height200px ＜写真のサイズ指定＞ ・width390px ・height190px ※これまでは、 写真のサイズが違うので、 css部分の#hoge img で、 画像の大きさを強制指定してました。 出来れば、 画像の大きさは、html側で指定せずに、 css側で調整したいです。 ムリなら、html側で大きさ指定します。 div枠にcss設定できれば早いかと思いますが、 それが出来ないため(img タグにしかcss指定不可)の相談です。 よろしくお願いします。
- ベストアンサー
- HTML
- CSSの切り替え
横に３カラムのページなのですが、スマートフォン向けにmax-device-width:480px でCSSを切り替えようと思っています。 その場合にスマートフォンだと２カラムページにしたいのですが３カラム目の記述を 表示させないような方法はないでしょうか？ 例えば <div id="colum1">カラム１の記述</div> <div id="colum2">カラム２の記述</div> <div id="colum3">カラム３の記述</div> ＰＣ用のCSS #colum1 { width: 100px; } #colum2 { width: 400px; } #colum3 { width: 200px; } スマホ用のCSS #colum1 { width: 100px; } #colum2 { width: 400px; } #colum3 { width: 0px; } このように0指定しても記述を消すことはできません、スマホの場合３カラム目を 無視するような方法はないでしょうか？
- ベストアンサー
- CSS
- 画像にキャプションを付け画像の右端で合わせるには
画像にキャプションを付け、画像の右端に揃えたく以下のようなソースを書きました。 ------------ <div style="width:120px"> <div style="text-align:right">表題</div> <div><img src="画像.gif" width=120 height=80></div> </div> ------------ これだとimgとdivに同じ値を2度書かなくてはならない div側に画像の幅を記述する事なく同じ事を可能にするcssの記述方法はありませんか？ ------------ □□□□表題□□□□□□ ■■■■■■□□□□□□ ■■画像■■□□□□□□ ■■■■■■□□□□□□ ■■■■■■□□□□□□ ------------ □＝何もない領域 ■＝画像の描画領域
- 締切済み
- HTML
- 画像のフェードインについて・・・。
現在のホームページですが、サムネイル画像(4枚あります)をオンマウスすれば拡大部分の画像(4枚あります)が切替わるようになっています。 画像がパッと切替わるのを、サムネイル画像をクリックすれば、フェードイン(徐々に画像がでるような感じ)で切替わるようにしたいと思っています。 下記は、現在のソースです。（あまり関係ないと思う部分は省いてます） 回答の方、宜しくお願い致します。 <!-- InstanceBeginEditable name="head" --> <script type="text/javascript" src="../js/layer.js"></script> <script type='text/javascript'> <!-- //--すべてを隠す function hideALL(){ hideLAYER('img0') hideLAYER('img1') hideLAYER('img2') hideLAYER('img3') } //--> </script> <!-- InstanceEndEditable --> <link href="../css/original.css" rel="stylesheet" type="text/css" media="all"> </head> <!-- InstanceBeginEditable name="main-images" --> <div><img src="../img_画像_001.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img0"><img src="../img_画像_001.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img1"><img src="../img_画像_002.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img2"><img src="../img_画像_003.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img3"><img src="../img_画像_004.jpg" alt="画像説明" width="600" height="400" /></div> <!-- InstanceEndEditable --> </div> <!--work-left --> <div class="work-bottom"> <!-- InstanceBeginEditable name="sumnail" --> <a href="#" onmouseover="hideALL();showLAYER('img0')"><img src="../img_works/icon/画像_001_s.jpg" alt="画像説明" width="45" height="45" /></a><a href="#" onmouseover="hideALL();showLAYER('img1')"><img src="../img_works/icon/画像_002_s.jpg" alt="画像説明" width="45" height="45" /></a><a href="#" onmouseover="hideALL();showLAYER('img2')"><img src="../img_works/icon/画像_003_s.jpg" alt="画像説明" width="45" height="45" /></a><a href="#" onmouseover="hideALL();showLAYER('img3')"><img src="../img_works/icon/画像_004_s.jpg" alt="画像説明" width="45" height="45" /></a> <!-- InstanceEndEditable --> </div> <!--work-bottom --> </div><!--work-shosai --> </div><!--main終了 --> </div><!--contents終了 -->
- ベストアンサー
- その他([技術者向] コンピューター)
- 画像のフェードインについて・・・。
以前にも質問させていただいたのですが、解決に至らなかったので、再度質問させていただきました。 現在のホームページですが、サムネイル画像(4枚あります)をオンマウスすれば拡大部分の画像(4枚あります)が切替わるようになっています。 画像がパッと切替わるのを、サムネイル画像をクリックすれば、フェードイン(徐々に画像がでるような感じ)で切替わるようにしたいと思っています。 下記は、現在のソースです。（あまり関係ないと思う部分は省いてます） こういうことに関してはまったくの素人です・・・。 回答の方、宜しくお願い致します。 <!-- InstanceBeginEditable name="head" --> <script type="text/javascript" src="../js/layer.js"></script> <script type='text/javascript'> <!-- //--すべてを隠す function hideALL(){ hideLAYER('img0') hideLAYER('img1') hideLAYER('img2') hideLAYER('img3') } //--> </script> <!-- InstanceEndEditable --> <link href="../css/original.css" rel="stylesheet" type="text/css" media="all"> </head> <!-- InstanceBeginEditable name="main-images" --> <div><img src="../img_画像_001.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img0"><img src="../img_画像_001.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img1"><img src="../img_画像_002.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img2"><img src="../img_画像_003.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img3"><img src="../img_画像_004.jpg" alt="画像説明" width="600" height="400" /></div> <!-- InstanceEndEditable --> </div> <!--work-left --> <div class="work-bottom"> <!-- InstanceBeginEditable name="sumnail" --> <a href="#" onmouseover="hideALL();showLAYER('img0')"><img src="../img_works/icon/画像_001_s.jpg" alt="画像説明" width="45" height="45" /></a><a href="#" onmouseover="hideALL();showLAYER('img1')"><img src="../img_works/icon/画像_002_s.jpg" alt="画像説明" width="45" height="45" /></a><a href="#" onmouseover="hideALL();showLAYER('img2')"><img src="../img_works/icon/画像_003_s.jpg" alt="画像説明" width="45" height="45" /></a><a href="#" onmouseover="hideALL();showLAYER('img3')"><img src="../img_works/icon/画像_004_s.jpg" alt="画像説明" width="45" height="45" /></a> <!-- InstanceEndEditable --> </div> <!--work-bottom --> </div><!--work-shosai --> </div><!--main終了 --> </div><!--contents終了 -->
- 締切済み
- JavaScript
- 横並びのカラム内で画像の高さを基準にして合わせたい
お疲れ様です。 横並びのアルバムについて質問です。columnボックスに見出し＜ｈ４＞と画像、説明文の＜ｐ＞が入っています。見出しの文字数と説明文の長さは一定ではないので、column内の要素の位置がそれぞれ違います。 これを画像の頭部分で高さを揃えることはｃｓｓだけで実現できるでしょうか。 見出しと説明文どちらかがなければcolumnにinline-blockを指定してあげればよいのですが。 お知恵を貸していただければと思います。 ※画像の大きさは一定です。 <div class="column4"> <div class="column"> <h4>■ダミーテキスト</h4> <div class="image"><img src=".img" alt=""></div> <div class="text"><p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p></div> </div> <div class="column"> <h4>■ダミーテキスト</h4> <div class="image"><img src=".img" alt=""></div> <div class="text"><p>ダミーテキストダミーテキストダミーテキストダミーテキスト</p></div> </div> <div class="column"> <h4>■ダミーテキスト</h4> <div class="image"><img src=".img" alt=""></div> <div class="text"><p>ダミーテキストダミーテキストダミーテキストダミーテキスト</p></div> </div> <div class="column"> <h4>■ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</h4> <div class="image"><img src=".img" alt=""></div> <div class="text"><p>ダミーテキスト</p></div> </div> </div>
- ベストアンサー
- CSS
- CSSにてfloat:leftを使用して画像を3つ並べたのですが。。
CSSにてfloat:leftを使用して画像を3つ並べたのですがこの3つの画像をセンターによせることができません。 なんでかまったくわかりません（ToT） 教えてくださいｍ（＿＿）ｍ 【HTML】 <div class="box2"><img src="images/sum2.gif"></div> <div class="box3"><img src="images/sum3.gif"></div> <div class="box4"><img src="images/sum4.gif"></div> 【CSS】 .box2{ float:left; width:219px; } .box3{ float:left ; width:156px;} .box4{ float:left ; width:195px; }
- 締切済み
- その他([技術者向] コンピューター)
- 画像にリンクをつけたら、実線でかこまれた
バナーをつくり、それにリンクの指定をしたら、実線でかこまれてしまいました。 こんなことは初めてです。 <div class="top_left"><a href="index0.html"><img src="xx.png" width="558" height="119" ></a> </div> 単純な指定だとおもうのですが・・・。 お手数ですが、よろしくお願いします。 なお、 .link a { color: #111; } .link a:hover { color: #aaa; } .link a { text-decoration: none; } ほかの箇所で、文字のリンクの下線を消すために、cssで上のような 記述をしています。（関係あるかはわかりませんが・・・） 画像の箇所には、上記のスタイルは指定していません。
- ベストアンサー
- CSS
- img画像をスマホでクリックすると画像保存とでる
画像をクリックするクリックゲームを作ったのですが、imgの画像をスマホでクリックすると画像をほぞんが出てしまいます。 これを出ないようにできないのでしょうか？ 背景にする方法もありますが、なぜか何も出てこないのと、 沢山あるimgタグをすべてCSSに変換するのが大変です。
- ベストアンサー
- HTML
