人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

背景画像・css関連の質問です。
横幅が3000px、縦幅400pxの画像があるとします。
これをhtmlに直接 <img src="aaa.jpg"> などで表示すると、ブラウザの画面からはみ出して、下にバーが出てしまいます。
cssのbackgroundでDIV要素等に width: 100%, height: 400px にすると表示されます。
ユーザーに画像をアップロードさせる際、どんな画像がアップロードされるかわからないという状況で、
・横は画面をはみ出さない(横500pxや横1000pxといった画像は中央に配置 center center no-repeat)
・縦は400pxまでにしたい(400pxを超えている場合は centerで切り抜き、横幅はそのまま)
ということは可能でしょうか?
わかりづらいかと思いますがよろしくお願いします。

●質問者: dekapurio
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● ジント兄さん
●270ポイント ベストアンサー

イケてない方法だなと思うけど、一つ思いついたので書きます。
読解力無いので質問の意図を勘違いしていたらごめんなさい。

DIVの中に、高さを算出する目的でIMG要素を入れる。
表示は背景でやる。
IMG要素のsrc属性の値は背景の画像と一緒で、visibility:hidden;とかopacity:0;にする。
DIVはmax-height:400px;


dekapurioさんのコメント
回答有難うございます。 縦の挙動はパーフェクトでした。 いけたかなと思ったんですが、ブラウザからはみ出る横長の画像の場合、imgタグをいれているので(隠しているとはいえ)下のバーが出てしまいますね。

ジント兄さんさんのコメント
DIVにoverfrow:hidden;でどうでしょう?

dekapurioさんのコメント
overfrow:hidden; でも駄目ですね…imgタグの分がはみだしてしまいますね。

a-kuma3さんのコメント
こんな感じでどうでしょう。 >|html| <style> .A { height: 400px; max-height: 400px; width: 100%; border: 1px solid red; background: url(...) center center no-repeat; } .A IMG { visibility: hidden; opacity: 0; width: 100%; } </style> <div class="A"> <img src="..."> </div> ||<

dekapurioさんのコメント
.Aでheight: 400px;を指定しているので300pxの画像だった場合100pxの無駄な余白が出来てしまいますかね。 また、.A IMGでwidth: 100%;についてですが、縦も縮小されてしまうと思います。

a-kuma3さんのコメント
あー、画像がちっちゃいときにも 400px になっちゃうか。 height: 400px; を削っても一緒だな...

a-kuma3さんのコメント
>> また、.A IMGでwidth: 100%;についてですが、縦も縮小されてしまうと思います。 << 縮小されないですよ。試してから書いてます。 # って、一回コメントを消したのは、背景画像のサイズがちょっと違ってたからなんですが (^^;

dekapurioさんのコメント
これは失礼しました。確かに縮小されなかったです。 昨日試したときは縦の挙動はOKだったので、これでいけるはずなんですが、今度はmax-height: 400px; の高さで固定されちゃいました。。

dekapurioさんのコメント
以下でたぶんいけました。 .A { max-height: 400px; width: 100%; background: url(...) center center no-repeat; } .A IMG { visibility: hidden; opacity: 0; max-width: 100%; }

ジント兄さんさんのコメント
>DIVにoverfrow:hidden;でどうでしょう? ごめんなさい。overfrowじゃなくてoverflowでした。 ……って、これを直したところでちゃんとした挙動にはならないみたいだし、 質問者さんがすでに解決できているみたいですね。

2 ● pogpi
●30ポイント

divタグにcssで、width:100%;height:400px;background-image:url('/hoge.gif');background-repeat:no-repeat;background-position:center center;
で、どうですか。


dekapurioさんのコメント
それだと300pxの高さの画像をアップロードしたときに、100pxの無駄な余白が出きてしまいますね。高さが指定できれば簡単なんですが。。

pogpiさんのコメント
heightの指定はなしで、ダミーのdivタグを中に入れて、400以上なら400、400以下の場合はそのheightを画像の高さに合わせるというのは、どうですか。アップロードされた時点で、画像の高さは取れますよね。
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ