背景画像・css関連の質問です。

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

回答の条件
  • 1人1回まで
  • 13歳以上
  • 登録:2014/12/05 21:44:19
  • 終了:2014/12/06 12:40:05

ベストアンサー

id:jislotz No.1

ジント兄さん回答回数19ベストアンサー獲得回数72014/12/06 02:23:43

ポイント270pt

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

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

他8件のコメントを見る
id:dekapurio

以下でたぶんいけました。

.A {
max-height: 400px;
width: 100%;
background: url(...) center center no-repeat;
}
.A IMG {
visibility: hidden;
opacity: 0;
max-width: 100%;
}

2014/12/06 12:08:43
id:jislotz

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

2014/12/06 12:31:51

その他の回答(1件)

id:jislotz No.1

ジント兄さん回答回数19ベストアンサー獲得回数72014/12/06 02:23:43ここでベストアンサー

ポイント270pt

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

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

他8件のコメントを見る
id:dekapurio

以下でたぶんいけました。

.A {
max-height: 400px;
width: 100%;
background: url(...) center center no-repeat;
}
.A IMG {
visibility: hidden;
opacity: 0;
max-width: 100%;
}

2014/12/06 12:08:43
id:jislotz

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

2014/12/06 12:31:51
id:pogpi No.2

pogpi回答回数369ベストアンサー獲得回数492014/12/06 08:25:35

ポイント30pt

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

id:dekapurio

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

2014/12/06 10:29:51
id:pogpi

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

2014/12/06 11:36:42
  • id:a-kuma3
    >・縦は400pxまでにしたい(400pxを超えている場合は centerで切り抜き、横幅はそのまま)
    「切り抜き」ってのが、css だけだと難しそうな。
    切り抜きだけだと、clip でいけるけど、サイズを指定しなきゃいけないからなあ。
  • id:dekapurio
    以下のcssみたいに、縦が500pxあれば上50pxと下50pxは表示しないという、本来ならなんてことないことなんですけどね。
    div.abc {
    height: 400px;
    background: url(...) center center no-repeat;
    }
    高さが指定できないというのが最大の問題なんですよね。
  • id:dekapurio
    ん~やはり駄目でした。
    ・横2500px、縦300pxとかの画像だとdivの高さがブラウザ幅に応じて縮小してしまう
    ・400px以下の画像だと余白が出てしまう
    結局振り出しに戻った感じです。。
  • id:jislotz
    横方向の左右の端もカットされる仕様でしたか。
    それならやはり2014/12/06 03:48:03のコメントの
    overfrowをoverflowにすればいけると思います。

    画像を4パターン用意してテストのページを作ってみました。
    http://jislotz.net/test/test.html
  • id:dekapurio
    素晴らしいですね。
    思い描いていた挙動になっています。
    どうも有難うございました!

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません