質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.48%

  • JavaScript

    16982questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    6920questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • CSS

    5997questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • HTML5

    4167questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • CSS3

    2137questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

CSSで親要素の幅に合わせ背景画像を拡大させる方法

解決済

回答 4

投稿 編集

  • 評価
  • クリップ 2
  • VIEW 3,153

miu_ras

score 601

まず現状のコードを見てください。※単体で動作するようにしました。
・親divが画面幅に応じて変化する
・子divは背景画像のサイズに合わせ縦横のサイズを指定している
・子divの縦横ともに中央に別の画像を配置
という感じです。

これを
・親divの幅に応じて拡大・縮小するようにしたい
・別画像を子divの拡大縮小にあわせ、子divの縦横ともに中央に配置したい
・別画像も子divの拡大縮小にあわせ拡大縮小したい(これはできなくてもいい)
と思っています。


最終手段としては、メディアクエリで3段階くらいに固定サイズに指定し分ければいいと思っています。

PCなどはそれでも問題ないのですが、スマホなどの画面の小さなデバイスでは、スクロールバーを出さずにしかしできるだけ大きく表示したいので、できれば画面幅に合わせて最大表示したいと思っています。

なので「メディアクエリで段階的固定サイズ指定」よりも、もう少しスマートな方法はないかと思い質問をしました。出来ればCSSだけで済ませたいです。しかしjQuery・JavaScriptを使ってもいいです。

あと、画像の縦横中央表示は、テクニックを知らないままネットで見つけたサンプルを参考に実装しました。ので、ここについてもよりよい方方があれば教えてください。

ちなみにサンプルコード上の背景画像は無地の青一色の画像です。もしもこの画像ならば、画像を使わずに塗ればいいだけですが、Base64で表現するために小さい画像を作っただけで、実際には別の画像を使っています。ので画像を使わないという選択肢は無しでお願いします。

よろしくお願いします。
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>

<div class="panel-body" style="width: 90%; border: 3px solid red;">
    <div id="baseimg">
        <img src="data:image/gif;base64,R0lGODlhEAAQAJEAAGZmZv+ZAP//Jf///yH5BAUUAAMALAAAAAAQABAAAAI3nAeZxwcCIWguxkeRvfk9KUxNEl6hWAnBGlyoprLbAm+z8dkWmus00tu9gDlFBmccjhhKppNRAAA7">
    </div>
</div>

<style>
#baseimg {
    width: 411px;
    height: 390px;
    line-height:390px;
    text-align: center;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZsAAAGGCAIAAAAisrvqAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAThSURBVHhe7dSBDABADACx9zd4tCmMYh6XJmXo+7MADUYDOowGdBgN6DAa0GE0oMNoQIfRgA6jAR1GAzqMBnQYDegwGtBhNKDDaECH0YAOowEdRgM6jAZ0GA3oMBrQYTSgw2hAh9GADqMBHUYDOowGdBgN6DAa0GE0oMNoQIfRgA6jAR1GAzqMBnQYDegwGtBhNKDDaECH0YAOowEdRgM6jAZ0GA3oMBrQYTSgw2hAh9GADqMBHUYDOowGdBgN6DAa0GE0oMNoQIfRgA6jAR1GAzqMBnQYDegwGtBhNKDDaECH0YAOowEdRgM6jAZ0GA3oMBrQYTSgw2hAh9GADqMBHUYDOowGdBgN6DAa0GE0oMNoQIfRgA6jAR1GAzqMBnQYDegwGtBhNKDDaECH0YAOowEdRgM6jAZ0GA3oMBrQYTSgw2hAh9GADqMBHUYDOowGdBgN6DAa0GE0oMNoQIfRgA6jAR1GAzqMBnQYDegwGtBhNKDDaECH0YAOowEdRgM6jAZ0GA3oMBrQYTSgw2hAh9GADqMBHUYDOowGdBgN6DAa0GE0oMNoQIfRgA6jAR1GAzqMBnQYDegwGtBhNKDDaECH0YAOowEdRgM6jAZ0GA3oMBrQYTSgw2hAh9GADqMBHUYDOowGdBgN6DAa0GE0oMNoQIfRgA6jAR1GAzqMBnQYDegwGtBhNKDDaECH0YAOowEdRgM6jAZ0GA3oMBrQYTSgw2hAh9GADqMBHUYDOowGdBgN6DAa0GE0oMNoQIfRgA6jAR1GAzqMBnQYDegwGtBhNKDDaECH0YAOowEdRgM6jAZ0GA3oMBrQYTSgw2hAh9GADqMBHUYDOowGdBgN6DAa0GE0oMNoQIfRgA6jAR1GAzqMBnQYDegwGtBhNKDDaECH0YAOowEdRgM6jAZ0GA3oMBrQYTSgw2hAh9GADqMBHUYDOowGdBgN6DAa0GE0oMNoQIfRgA6jAR1GAzqMBnQYDegwGtBhNKDDaECH0YAOowEdRgM6jAZ0GA3oMBrQYTSgw2hAh9GADqMBHUYDOowGdBgN6DAa0GE0oMNoQIfRgA6jAR1GAzqMBnQYDegwGtBhNKDDaECH0YAOowEdRgM6jAZ0GA3oMBrQYTSgw2hAh9GADqMBHUYDOowGdBgN6DAa0GE0oMNoQIfRgA6jAR1GAzqMBnQYDegwGtBhNKDDaECH0YAOowEdRgM6jAZ0GA3oMBrQYTSgw2hAh9GADqMBHUYDOowGdBgN6DAa0GE0oMNoQIfRgA6jAR1GAzqMBnQYDegwGtBhNKDDaECH0YAOowEdRgM6jAZ0GA3oMBrQYTSgw2hAh9GADqMBHUYDOowGdBgN6DAa0GE0oMNoQIfRgA6jAR1GAzqMBnQYDegwGtBhNKDDaECH0YAOowEdRgM6jAZ0GA3oMBrQYTSgw2hAh9GADqMBHUYDOowGdBgN6DAa0GE0oMNoQIfRgA6jAR1GAzqMBnQYDegwGtBhNKDDaECH0YAOowEdRgM6jAZ0GA3oMBrQYTSgw2hAh9GADqMBHUYDOowGdBgN6DAa0GE0oMNoQIfRgA6jAR1GAzqMBnQYDegwGtBhNKDDaECH0YAOowEdRgM6jAZ0GA3oMBrQYTSgw2hAh9GADqMBHUYDOowGdBgN6DAa0GE0oGL2ACpLnsRAjXt8AAAAAElFTkSuQmCC");
}

img {
    vertical-align: middle;
}
</style>

</body>
</html>
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 4

+1

回答そのものではありませんが、参考情報を紹介します。

参考:
- 背景画像をブラウザいっぱいに表示するシンプルな最新テクニック http://coliss.com/articles/build-websites/operation/css/css-responsive-full-background-image-by-sixrevisions.html
- スマホサイトで画面幅に合わせて画像を自動で拡大縮小させる方法 http://www.webworkersclip.com/3025/




投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/02/18 01:55

    情報ありがとうございます。しかし残念ながらいただいた情報ではやりたいことは実現できませんでした…。

    キャンセル

check解決した方法

0

一応、自分で試した結果を。自分的にはjQueryとかresizeとかできれば使いたくなかったのですが。やりたいことのイメージを伝える意味でも、無理やりな感じのコードを貼っておきます。

よりよいコードがあれば教えていただきたいです。よろしくお願いします。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>

<div class="panel-body" style="width: 90%; border: 3px solid red;">
    <div id="baseimg">
        <img src="data:image/gif;base64,R0lGODlhEAAQAJEAAGZmZv+ZAP//Jf///yH5BAUUAAMALAAAAAAQABAAAAI3nAeZxwcCIWguxkeRvfk9KUxNEl6hWAnBGlyoprLbAm+z8dkWmus00tu9gDlFBmccjhhKppNRAAA7">
    </div>
</div>

<style>
#baseimg {
    width: 100%;
    background-size: contain;
    text-align: center;
    height: 100%;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZsAAAGGCAIAAAAisrvqAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAThSURBVHhe7dSBDABADACx9zd4tCmMYh6XJmXo+7MADUYDOowGdBgN6DAa0GE0oMNoQIfRgA6jAR1GAzqMBnQYDegwGtBhNKDDaECH0YAOowEdRgM6jAZ0GA3oMBrQYTSgw2hAh9GADqMBHUYDOowGdBgN6DAa0GE0oMNoQIfRgA6jAR1GAzqMBnQYDegwGtBhNKDDaECH0YAOowEdRgM6jAZ0GA3oMBrQYTSgw2hAh9GADqMBHUYDOowGdBgN6DAa0GE0oMNoQIfRgA6jAR1GAzqMBnQYDegwGtBhNKDDaECH0YAOowEdRgM6jAZ0GA3oMBrQYTSgw2hAh9GADqMBHUYDOowGdBgN6DAa0GE0oMNoQIfRgA6jAR1GAzqMBnQYDegwGtBhNKDDaECH0YAOowEdRgM6jAZ0GA3oMBrQYTSgw2hAh9GADqMBHUYDOowGdBgN6DAa0GE0oMNoQIfRgA6jAR1GAzqMBnQYDegwGtBhNKDDaECH0YAOowEdRgM6jAZ0GA3oMBrQYTSgw2hAh9GADqMBHUYDOowGdBgN6DAa0GE0oMNoQIfRgA6jAR1GAzqMBnQYDegwGtBhNKDDaECH0YAOowEdRgM6jAZ0GA3oMBrQYTSgw2hAh9GADqMBHUYDOowGdBgN6DAa0GE0oMNoQIfRgA6jAR1GAzqMBnQYDegwGtBhNKDDaECH0YAOowEdRgM6jAZ0GA3oMBrQYTSgw2hAh9GADqMBHUYDOowGdBgN6DAa0GE0oMNoQIfRgA6jAR1GAzqMBnQYDegwGtBhNKDDaECH0YAOowEdRgM6jAZ0GA3oMBrQYTSgw2hAh9GADqMBHUYDOowGdBgN6DAa0GE0oMNoQIfRgA6jAR1GAzqMBnQYDegwGtBhNKDDaECH0YAOowEdRgM6jAZ0GA3oMBrQYTSgw2hAh9GADqMBHUYDOowGdBgN6DAa0GE0oMNoQIfRgA6jAR1GAzqMBnQYDegwGtBhNKDDaECH0YAOowEdRgM6jAZ0GA3oMBrQYTSgw2hAh9GADqMBHUYDOowGdBgN6DAa0GE0oMNoQIfRgA6jAR1GAzqMBnQYDegwGtBhNKDDaECH0YAOowEdRgM6jAZ0GA3oMBrQYTSgw2hAh9GADqMBHUYDOowGdBgN6DAa0GE0oMNoQIfRgA6jAR1GAzqMBnQYDegwGtBhNKDDaECH0YAOowEdRgM6jAZ0GA3oMBrQYTSgw2hAh9GADqMBHUYDOowGdBgN6DAa0GE0oMNoQIfRgA6jAR1GAzqMBnQYDegwGtBhNKDDaECH0YAOowEdRgM6jAZ0GA3oMBrQYTSgw2hAh9GADqMBHUYDOowGdBgN6DAa0GE0oMNoQIfRgA6jAR1GAzqMBnQYDegwGtBhNKDDaECH0YAOowEdRgM6jAZ0GA3oMBrQYTSgw2hAh9GADqMBHUYDOowGdBgN6DAa0GE0oMNoQIfRgA6jAR1GAzqMBnQYDegwGtBhNKDDaECH0YAOowEdRgM6jAZ0GA3oMBrQYTSgw2hAh9GADqMBHUYDOowGdBgN6DAa0GE0oMNoQIfRgA6jAR1GAzqMBnQYDegwGtBhNKDDaECH0YAOowEdRgM6jAZ0GA3oMBrQYTSgw2hAh9GADqMBHUYDOowGdBgN6DAa0GE0oGL2ACpLnsRAjXt8AAAAAElFTkSuQmCC");
}

img {
    vertical-align: middle;
    width: 8%;
}
</style>

<script>
$(window).resize(function() {
    var w = $("#baseimg").width();
    var h = w * 0.9489;
    $("#baseimg").height(h);
    $("#baseimg").css("line-height", h + "px");
});
$(window).resize();
</script>

</body>
</html>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

今はとりあえず、メディアクエリで3段階で固定の表示にしています。とりあえず手持ちのスマホでもはみ出ないようにはなりました。

が、より小さなデバイスでははみ出たり、少し大きめのデバイスでは小さめに表示されてしまうと思うので、引き続き情報募集しています。


投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

#baseimg の縦横を親に追従させるにはサイズを%指定してやる必要があります。
width:100%;
height:100%;
 (親のスタイルによっては親を貫通して大きくなったりするかもしれませんが、その時はここを頑張って理解しましょう・・・
http://www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html#x5)

あとは、ブラウザが限定されますが background-size: 100% auto; などはどうでしょうか?


最期に質問内容に貼られていたものをいじったやつを貼っておきます。
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>

<div class="panel-body">
    <div id="baseimg">
        <img id="hiyoko" src="data:image/gif;base64,R0lGODlhEAAQAJEAAGZmZv+ZAP//Jf///yH5BAUUAAMALAAAAAAQABAAAAI3nAeZxwcCIWguxkeRvfk9KUxNEl6hWAnBGlyoprLbAm+z8dkWmus00tu9gDlFBmccjhhKppNRAAA7">
    </div>
</div>

<style>
.panel-body {
    width: 90%; 
    height:150px;
    border: 3px solid red;
    position:relative;
}
#baseimg {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZsAAAGGCAIAAAAisrvqAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAThSURBVHhe7dSBDABADACx9zd4tCmMYh6XJmXo+7MADUYDOowGdBgN6DAa0GE0oMNoQIfRgA6jAR1GAzqMBnQYDegwGtBhNKDDaECH0YAOowEdRgM6jAZ0GA3oMBrQYTSgw2hAh9GADqMBHUYDOowGdBgN6DAa0GE0oMNoQIfRgA6jAR1GAzqMBnQYDegwGtBhNKDDaECH0YAOowEdRgM6jAZ0GA3oMBrQYTSgw2hAh9GADqMBHUYDOowGdBgN6DAa0GE0oMNoQIfRgA6jAR1GAzqMBnQYDegwGtBhNKDDaECH0YAOowEdRgM6jAZ0GA3oMBrQYTSgw2hAh9GADqMBHUYDOowGdBgN6DAa0GE0oMNoQIfRgA6jAR1GAzqMBnQYDegwGtBhNKDDaECH0YAOowEdRgM6jAZ0GA3oMBrQYTSgw2hAh9GADqMBHUYDOowGdBgN6DAa0GE0oMNoQIfRgA6jAR1GAzqMBnQYDegwGtBhNKDDaECH0YAOowEdRgM6jAZ0GA3oMBrQYTSgw2hAh9GADqMBHUYDOowGdBgN6DAa0GE0oMNoQIfRgA6jAR1GAzqMBnQYDegwGtBhNKDDaECH0YAOowEdRgM6jAZ0GA3oMBrQYTSgw2hAh9GADqMBHUYDOowGdBgN6DAa0GE0oMNoQIfRgA6jAR1GAzqMBnQYDegwGtBhNKDDaECH0YAOowEdRgM6jAZ0GA3oMBrQYTSgw2hAh9GADqMBHUYDOowGdBgN6DAa0GE0oMNoQIfRgA6jAR1GAzqMBnQYDegwGtBhNKDDaECH0YAOowEdRgM6jAZ0GA3oMBrQYTSgw2hAh9GADqMBHUYDOowGdBgN6DAa0GE0oMNoQIfRgA6jAR1GAzqMBnQYDegwGtBhNKDDaECH0YAOowEdRgM6jAZ0GA3oMBrQYTSgw2hAh9GADqMBHUYDOowGdBgN6DAa0GE0oMNoQIfRgA6jAR1GAzqMBnQYDegwGtBhNKDDaECH0YAOowEdRgM6jAZ0GA3oMBrQYTSgw2hAh9GADqMBHUYDOowGdBgN6DAa0GE0oMNoQIfRgA6jAR1GAzqMBnQYDegwGtBhNKDDaECH0YAOowEdRgM6jAZ0GA3oMBrQYTSgw2hAh9GADqMBHUYDOowGdBgN6DAa0GE0oMNoQIfRgA6jAR1GAzqMBnQYDegwGtBhNKDDaECH0YAOowEdRgM6jAZ0GA3oMBrQYTSgw2hAh9GADqMBHUYDOowGdBgN6DAa0GE0oMNoQIfRgA6jAR1GAzqMBnQYDegwGtBhNKDDaECH0YAOowEdRgM6jAZ0GA3oMBrQYTSgw2hAh9GADqMBHUYDOowGdBgN6DAa0GE0oMNoQIfRgA6jAR1GAzqMBnQYDegwGtBhNKDDaECH0YAOowEdRgM6jAZ0GA3oMBrQYTSgw2hAh9GADqMBHUYDOowGdBgN6DAa0GE0oMNoQIfRgA6jAR1GAzqMBnQYDegwGtBhNKDDaECH0YAOowEdRgM6jAZ0GA3oMBrQYTSgw2hAh9GADqMBHUYDOowGdBgN6DAa0GE0oMNoQIfRgA6jAR1GAzqMBnQYDegwGtBhNKDDaECH0YAOowEdRgM6jAZ0GA3oMBrQYTSgw2hAh9GADqMBHUYDOowGdBgN6DAa0GE0oGL2ACpLnsRAjXt8AAAAAElFTkSuQmCC");
    width:100%;
    height:100%;
}

#hiyoko {
    display:block;
    position:absolute;
       top:0;
    bottom:0;
      left:0;
      right:0;
    margin:auto;
}

</style>

</body>
</html>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/02/19 03:34

    ご提示していただいたソースは、高さは変わらずでかつ、横にリピート表示されているだけですよね…。柄のない画像にしてしまったため分かりにくいのですが。

    すみません。説明不足でした。私の言葉の「拡大・縮小」とは、
    ・縦横の比率を保持して横幅が伸びたら高さも伸びる
    ・当然画像は全体が表示されることが前提
    という意味でした。

    キャンセル

  • 2015/02/19 20:42

    #baseimgの縦横比固定は必須ですかね?背景画像の縦横比維持だけで良ければ、こんな感じでどうでしょうか。

    ```
    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="utf-8">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <style>


    /* テスト用 ブラウザのサイズを自由に変更して確認出来るように */
    html,body{
    height:95%;
    }

    /* #baseimgは この要素を基準に拡大縮小する */
    .panel-body {
    /* 幅,高さを自由に変更しても、背景の縦横比は維持される */
    width:100%;
    height:100%;
    border: 3px solid red;
    }

    /* この要素の縦横比は保持されないが 背景画像の縦横比は保持される */
    #baseimg {
    background-size: contain;
    background-position: center;
    background-repeat:no-repeat;

    /* ひよこちゃんを借りました */
    background-image: url("data:image/gif;base64,R0lGODlhEAAQAJEAAGZmZv+ZAP//Jf///yH5BAUUAAMALAAAAAAQABAAAAI3nAeZxwcCIWguxkeRvfk9KUxNEl6hWAnBGlyoprLbAm+z8dkWmus00tu9gDlFBmccjhhKppNRAAA7");

    /* 親要素に追従 */
    /* 縦横比は親に依存 */
    width: 100%;
    height: 100%;

    /* 中央配置の基準にしたい要素にコレを設定する必要がある */
    position:relative;
    }

    /* imgタグは 祖先の position:relative; なブロック要素の中央に配置される */
    /* この場合 #baseimg */
    img {
    position:absolute;
    margin:auto;
    top:0;
    left:0;
    right:0;
    bottom:0;
    }
    </style>

    </head>
    <body>

    <div class="panel-body">
    <div id="baseimg">
    <img src="data:image/gif;base64,R0lGODlhEAAQAJEAAGZmZv+ZAP//Jf///yH5BAUUAAMALAAAAAAQABAAAAI3nAeZxwcCIWguxkeRvfk9KUxNEl6hWAnBGlyoprLbAm+z8dkWmus00tu9gDlFBmccjhhKppNRAAA7">
    </div>
    </div>


    </body>
    </html>
    ```

    キャンセル

  • 2015/02/19 20:44

    うぇえ 新しい回答として投稿すべきなんだろうか・・・

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.48%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • JavaScript

    16982questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    6920questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • CSS

    5997questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • HTML5

    4167questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • CSS3

    2137questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。