まず現状のコードを見てください。※単体で動作するようにしました。
・親divが画面幅に応じて変化する
・子divは背景画像のサイズに合わせ縦横のサイズを指定している
・子divの縦横ともに中央に別の画像を配置
という感じです。
これを
・親divの幅に応じて拡大・縮小するようにしたい
・別画像を子divの拡大縮小にあわせ、子divの縦横ともに中央に配置したい
・別画像も子divの拡大縮小にあわせ拡大縮小したい(これはできなくてもいい)
と思っています。
最終手段としては、メディアクエリで3段階くらいに固定サイズに指定し分ければいいと思っています。
PCなどはそれでも問題ないのですが、スマホなどの画面の小さなデバイスでは、スクロールバーを出さずにしかしできるだけ大きく表示したいので、できれば画面幅に合わせて最大表示したいと思っています。
なので「メディアクエリで段階的固定サイズ指定」よりも、もう少しスマートな方法はないかと思い質問をしました。出来ればCSSだけで済ませたいです。しかしjQuery・JavaScriptを使ってもいいです。
あと、画像の縦横中央表示は、テクニックを知らないままネットで見つけたサンプルを参考に実装しました。ので、ここについてもよりよい方方があれば教えてください。
ちなみにサンプルコード上の背景画像は無地の青一色の画像です。もしもこの画像ならば、画像を使わずに塗ればいいだけですが、Base64で表現するために小さい画像を作っただけで、実際には別の画像を使っています。ので画像を使わないという選択肢は無しでお願いします。
よろしくお願いします。
lang
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 7</head> 8<body> 9 10<div class="panel-body" style="width: 90%; border: 3px solid red;"> 11 <div id="baseimg"> 12 <img src="data:image/gif;base64,R0lGODlhEAAQAJEAAGZmZv+ZAP//Jf///yH5BAUUAAMALAAAAAAQABAAAAI3nAeZxwcCIWguxkeRvfk9KUxNEl6hWAnBGlyoprLbAm+z8dkWmus00tu9gDlFBmccjhhKppNRAAA7"> 13 </div> 14</div> 15 16<style> 17#baseimg { 18 width: 411px; 19 height: 390px; 20 line-height:390px; 21 text-align: center; 22 background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZsAAAGGCAIAAAAisrvqAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAThSURBVHhe7dSBDABADACx9zd4tCmMYh6XJmXo+7MADUYDOowGdBgN6DAa0GE0oMNoQIfRgA6jAR1GAzqMBnQYDegwGtBhNKDDaECH0YAOowEdRgM6jAZ0GA3oMBrQYTSgw2hAh9GADqMBHUYDOowGdBgN6DAa0GE0oMNoQIfRgA6jAR1GAzqMBnQYDegwGtBhNKDDaECH0YAOowEdRgM6jAZ0GA3oMBrQYTSgw2hAh9GADqMBHUYDOowGdBgN6DAa0GE0oMNoQIfRgA6jAR1GAzqMBnQYDegwGtBhNKDDaECH0YAOowEdRgM6jAZ0GA3oMBrQYTSgw2hAh9GADqMBHUYDOowGdBgN6DAa0GE0oMNoQIfRgA6jAR1GAzqMBnQYDegwGtBhNKDDaECH0YAOowEdRgM6jAZ0GA3oMBrQYTSgw2hAh9GADqMBHUYDOowGdBgN6DAa0GE0oMNoQIfRgA6jAR1GAzqMBnQYDegwGtBhNKDDaECH0YAOowEdRgM6jAZ0GA3oMBrQYTSgw2hAh9GADqMBHUYDOowGdBgN6DAa0GE0oMNoQIfRgA6jAR1GAzqMBnQYDegwGtBhNKDDaECH0YAOowEdRgM6jAZ0GA3oMBrQYTSgw2hAh9GADqMBHUYDOowGdBgN6DAa0GE0oMNoQIfRgA6jAR1GAzqMBnQYDegwGtBhNKDDaECH0YAOowEdRgM6jAZ0GA3oMBrQYTSgw2hAh9GADqMBHUYDOowGdBgN6DAa0GE0oMNoQIfRgA6jAR1GAzqMBnQYDegwGtBhNKDDaECH0YAOowEdRgM6jAZ0GA3oMBrQYTSgw2hAh9GADqMBHUYDOowGdBgN6DAa0GE0oMNoQIfRgA6jAR1GAzqMBnQYDegwGtBhNKDDaECH0YAOowEdRgM6jAZ0GA3oMBrQYTSgw2hAh9GADqMBHUYDOowGdBgN6DAa0GE0oMNoQIfRgA6jAR1GAzqMBnQYDegwGtBhNKDDaECH0YAOowEdRgM6jAZ0GA3oMBrQYTSgw2hAh9GADqMBHUYDOowGdBgN6DAa0GE0oMNoQIfRgA6jAR1GAzqMBnQYDegwGtBhNKDDaECH0YAOowEdRgM6jAZ0GA3oMBrQYTSgw2hAh9GADqMBHUYDOowGdBgN6DAa0GE0oMNoQIfRgA6jAR1GAzqMBnQYDegwGtBhNKDDaECH0YAOowEdRgM6jAZ0GA3oMBrQYTSgw2hAh9GADqMBHUYDOowGdBgN6DAa0GE0oMNoQIfRgA6jAR1GAzqMBnQYDegwGtBhNKDDaECH0YAOowEdRgM6jAZ0GA3oMBrQYTSgw2hAh9GADqMBHUYDOowGdBgN6DAa0GE0oMNoQIfRgA6jAR1GAzqMBnQYDegwGtBhNKDDaECH0YAOowEdRgM6jAZ0GA3oMBrQYTSgw2hAh9GADqMBHUYDOowGdBgN6DAa0GE0oMNoQIfRgA6jAR1GAzqMBnQYDegwGtBhNKDDaECH0YAOowEdRgM6jAZ0GA3oMBrQYTSgw2hAh9GADqMBHUYDOowGdBgN6DAa0GE0oMNoQIfRgA6jAR1GAzqMBnQYDegwGtBhNKDDaECH0YAOowEdRgM6jAZ0GA3oMBrQYTSgw2hAh9GADqMBHUYDOowGdBgN6DAa0GE0oGL2ACpLnsRAjXt8AAAAAElFTkSuQmCC"); 23} 24 25img { 26 vertical-align: middle; 27} 28</style> 29 30</body> 31</html> 32
回答4件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/02/17 16:55