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

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

新規登録して質問してみよう
ただいま回答率
85.50%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

Q&A

解決済

1回答

1982閲覧

画像をDIVの大きさに合わたい

Qoo

総合スコア1249

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

0グッド

0クリップ

投稿2016/04/28 08:17

スマホ向けのページを作っています。

背景画像:url('img/bg.png')をdivの要素(middle)によって
画像の大きさを変更したいのですがうまくいきません。

background-size: cover;でも、
画像がbottomエリアの下に隠れてしまいます。

何か良い方法はないでしょうか

js

1 2 3<!DOCTYPE HTML> 4<html> 5<head> 6 <meta charset="UTF-8"> 7 <meta name="viewport" content="minimal-ui"> 8 <meta name="apple-mobile-web-app-capable" content="yes"> 9 <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> 10 11 <style type="text/css"> 12 13*{ 14 margin:0; 15 padding:0; 16 font-size: 48px; 17 font-family: 'メイリオ'; 18} 19 20html,body{ 21 height: 100%; 22} 23 24 25#middle{ 26 27 height:100%; 28 width: 100%; 29 30 background-color: #33ccdd; 31 32 position:absolute; 33 34 top:0; 35 margin: 0 auto; 36 box-sizing: border-box; 37 -webkit-box-sizing: border-box; 38 39 color: #000; 40 text-align: center; 41 42 display: flex; 43 align-items: center; /* 縦方向中央揃え */ 44 justify-content: center; /* 横方向中央揃え */ 45 flex-direction: column; 46 47 background-image: url('img/bg.png'); 48 background-size: cover; 49 50} 51 52 53#bottom{ 54 55 color: #fff; 56 height: 5%; 57 width: 100%; 58 background-color: #0099cc; 59 position:absolute; 60 bottom:0; 61 z-index: 9; 62 padding:16px; 63 box-sizing: border-box; 64 /*-webkit-box-sizing: border-box;*/ 65 66 text-align: center; 67 68} 69 70 71 72 </style> 73 74 75</head> 76<body> 77 <form action="" method="post" onsubmit="return false;"> 78 79 <div id="middle"> 80 81 </div> 82 83 <div id="bottom"> 84 85 </div> 86 87 </form> 88 89</body> 90</html> 91 92

気になる質問をクリップする

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ItoTomonori

2016/04/28 21:18

「background-size: cover;でも、 画像がbottomエリアの下に隠れてしまいます。」とは?具体的に、どのような表示を望んでいるのか、現状どのような表示なのか?もう少しわかりやすく説明していただけると。
guest

回答1

0

ベストアンサー

#middleの領域がウィンドウ幅全体に広がっていて、
その上に#bottomの領域をかぶせているので、
#middleの背景にbackground-size:coverで設定した背景画像が
#bottomの下に隠れてしまうのは当たり前なのでは??

投稿2016/04/29 04:42

編集2016/04/29 04:42
aKusano

総合スコア3763

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Qoo

2016/04/29 20:15

middleが100%になっていました。失礼しました。 ただ、middleを90%、bottomを10%などにしても background-imageは画面いっぱいに表示されているようです。 divの大きさに合わせて画像を表示したいと考えています
aKusano

2016/04/30 06:09

「cover」は指定された要素全体を覆い尽くすように背景画像を引き伸ばして表示するので、要素と画像の縦横比が異なる場合には画像が途中で切れることになります。 背景画像全体を常に表示しながら要素に合わせて伸縮させたいなら、「contain」ですが、要素と画像の縦横比が異なる場合、背景画像に覆われない空白領域が生じます。 どちらも嫌なら「100%」で覆うこともできますが、それだと画像の縦横比が変形されるので、画像がゆがみます。 おそらく満額回答になるような答えは見つからない可能性が高いので、何かを妥協する方向で検討するしかないのでは、、、と思います。 (※最終的なデザインイメージと動作仕様の詳細が分かればあるいは他の手法の提案もできるかもしれませんが、現状はこれしか言えませんね。。。)
Qoo

2016/05/02 03:02

ありがとうございます! 大変参考になりました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問