- ベストアンサー
リキッドデザインの縦向き画像
リキッドデザインで横向き画像を配置する場合、CSSでwidth100%で指定すると自動的にheightを計算されますが、縦向き画像の場合どのように指定すると良いのでしょうか?
- みんなの回答 (1)
- 専門家の回答
質問者が選んだベストアンサー
関連するQ&A
- 画像メインの1カラムのリキッドデザインができません
画像をメインにした1カラムのリキッドデザインを作成したいのですが、画像の縦横比が崩れて縦長になりながら可変してしまいます。どのようにcssを設定したらよろしいでしょうか?いろいろ検索したりしましたが、うまくできません。 また、こちらの質問機能じたい初めてさせていただいています。至らないことがあるかもしれませんが、ぜひともよろしくお願い致します。急ぎで解決したいです。^^; ---------------- <html> <head> <meta charset="UTF-8" > <meta name="viewport" content="width=device-width,maximum-scale=1.0,minimum-scale=0.5,user-scalable=yes,initial-scale=1.0"/> <link rel="stylesheet" href="css/a3.css" type="text/css" > <title></title> </head> <body> <div id="wall" > <div id="box"> <img src="css/images/main.jpg"> </div> </div> <div id="footer"><img src="css/images/foot.jpg"></div> </body> --------------------------- body{ width:100%; height:100px; max-height:720px; } #wall{ display:block; width:100%; height:100%; margin:0 auto; min-width:720px; min-height:325px; max-width:1440px; max-height:650px; background-image:url(images/G1.jpg); background-size: 100% 100%; } #box{ width:100%; height:100%; min-width:720px; min-height:325px; max-width:1440px; max-height:650px; } #footer { width:100%; margin:0 auto; min-width:720px; min-height:35px; max-width:1440px; max-height:70px; }
- ベストアンサー
- CSS
- フレキシブルデザイン、リキッドデザインのimg
初歩的な質問失礼致します。 フレキシブルデザイン、リキッドデザインでは基本的に各要素の幅を%指定すると知ったのですが、<img>タグで記述する画像はどのように幅を指定したらよいのでしょうか?? また、もしウインドウ幅に合わせて拡大するように指定したい場合、その画像の解像度は、 サイト幅に指定したmax-widthに合わせて作っておくといいのでしょうか?? どなたか教えていただけないでしょうか?? よろしくお願い致します。
- 締切済み
- CSS
- [CSS]リキッドレイアウト上で、floatさせたサイドバーの背景画像を高さ100%で敷き詰めたい
今ヘッダフッタ付きの3カラムブログデザインを作っています。 leftnaviとrightnavi(サイドバー/メニュー)の間にmaincontents(ブログのメイネントリ)が挟まるような、まあ一般的なブログデザインです。 で、質問なんですが、leftnaviとrightnavi(サイドバー/メニュー)に背景画像を敷き詰めたいんです。 ブログですので、基本的にはmaincontents(エントリ)の方がサイドバーよりもheightが大きくなってしまいます。 その際、サイドバーの背景が、記述されたメニューの部分までしか反映されません。これについて、エントリ部分の高さまで敷き詰める方法を教えて頂けませんでしょうか? 色々調べたところ、(http://css-happylife.com/log/css-template/000028.shtml)こちらで、width固定デザインの際にcontainerに背景画像を指定する方法が紹介されていました。 ただ、今回お伺いしたいのは、containerのwidthを%指定するリキッドデザインの場合、です。左右のサイドバーにはそれぞれ別の背景画像を指定したいと考えているのですが、それは可能なのでしょうか?
- 締切済み
- HTML
- max-widthを指定した場合の縦サイズのリサイズ方法
画像のサイズをCSSのmax-widthを指定した場合、縦のサイズを、縦横比率を変えずに自動でリサイズする方法を探しています。 CMS (Movable Type)でサイトを構築しており、ブログ記事の本文に「画像挿入」ボタンを利用して挿入するため、<img src="photo.jpg" width="600" height="400">とwidthとheightが指定された状態のため、max-widthで400pxと指定すると画像が縦長になってしまっています。 どのようにすれば縦横比率を変えず、さらにmax-widthのような形で縦のサイズを自動でリサイズする事ができますでしょうか?宜しくお願いします。
- ベストアンサー
- HTML
- htmlのデザインについて質問です。
htmlのデザインについて質問です。 cssに色々とコンテンツの位置を指定しています。 そして次のような記述をしました。 div#~ { width: 250px; height: 460px; background-image: (画像のURL);} このように画像を使うと、指定した位置に画像が表示されるのですが、 div#~ { width: 250px; height: 460px; border-style: solid; } と、枠にすると何故か指定した位置からズレるんです。 なぜなんでしょうか? 分かる方がいたら教えて下さい。
- ベストアンサー
- HTML
- 【html】画像を横(縦)の長さだけ指定して縦(横)の長さは画像に合わせる
画像を横(縦)の長さだけ指定して縦(横)の長さは画像に合わせる ということはできないんでしょうか? "auto"ではIEで表示できません 例 -- <img alt="test" width="300" height="auto" src="oma-n.jpg" /> --
- ベストアンサー
- ブログ
- 画像を縦に並べたら隙間ができることについて
画像を縦に並べたところ隙間ができてしまいます。 隙間無くくっつけたいのですがどうすればいいのでしょうか。 以下htmlです。 <img src="img/nakama_img01.gif" width="687" height="227" alt="画像1" /><br /> <img src="img/nakama_img02.gif" width="687" height="197" alt="画像2" /><br /> <img src="img/nakama_img03.gif" width="687" height="244" alt="画像3" /> <br />で改行せずくっつけてタグを並べても同じ結果でした。 よろしくお願いします。
- ベストアンサー
- HTML
- <td>内で背景縦100%リピートする方法
こんにちは。 現在ホームページを作成しているんですが、 凄く簡単そうなところで躓いてしまってます>< どうも上手くいかなくて… 分かる方いらっしゃったらご教授ください!! 今<td>内の背景をCSSで100%縦にリピートさせようとしています。 どうしてもCSSを使わなくてはいけないのは、 pngの透過をCSSでfilterを用いてbackgroundとして使ってるからです。 いくつか参考になりそうなサイトはあったんですが、 filterを使ってるからか(多分自分のミスだと思いますが;)上手くいきません。 今やりたいと思っているのはこんな状態です。 ■■■■■■■ ⇒<img src="イメージ1" width="200" height="10"> □□□□□□□ ⇒CSSで縦リピートしたい部分 □□□□□□□ □□□□□□□ □□□□□□□ ■■■■■■■ ⇒<img src="イメージ2" width="200" height="10"> これが<td height="100%" id="test"></td>の中に入ってる感じです。 ■(黒い四角)は角丸のにしたかったのでイメージにしました。 でもこうしてCSS上で□(上記の白四角の部分)の高さを 100%にすると、下のイメージ2の部分が消えて見えなくなってしまいます; ■の部分と□の部分をテーブルで分けてもダメでした。。 因みにCSSは以下の方法を試しました。 (1)普通に100%指定 height: 100%; (2)htmlとbodyにも指定 html, body { height: 100%; } body > #test { height: auto; } (3)htmlとbodyにも指定その2 html, body { height: 100%; } body > #test { height: 100%; } height98%とかも試したんですが、 2カラムの縦の高さをそろえたいとなると、 ブラウザやフォントサイズによってばらつきがでるので、 非常にこまってます; どなたか分かる方いらっしゃったら教えてもらえませんか? 宜しくお願い致します。
- 締切済み
- HTML
お礼
ご回答ありがとうございます。 大変参考になりました。