横幅が3000px、縦幅400pxの画像があるとします。
これをhtmlに直接 <img src="aaa.jpg"> などで表示すると、ブラウザの画面からはみ出して、下にバーが出てしまいます。
cssのbackgroundでDIV要素等に width: 100%, height: 400px にすると表示されます。
ユーザーに画像をアップロードさせる際、どんな画像がアップロードされるかわからないという状況で、
・横は画面をはみ出さない（横500pxや横1000pxといった画像は中央に配置 center center no-repeat）
・縦は400pxまでにしたい（400pxを超えている場合は centerで切り抜き、横幅はそのまま）
ということは可能でしょうか？
わかりづらいかと思いますがよろしくお願いします。
No.1
19
7
270pt
イケてない方法だなと思うけど、一つ思いついたので書きます。
読解力無いので質問の意図を勘違いしていたらごめんなさい。
DIVの中に、高さを算出する目的でIMG要素を入れる。
表示は背景でやる。
IMG要素のsrc属性の値は背景の画像と一緒で、visibility:hidden;とかopacity:0;にする。
DIVはmax-height:400px;
No.1
197
ここでベストアンサー
270pt
イケてない方法だなと思うけど、一つ思いついたので書きます。
読解力無いので質問の意図を勘違いしていたらごめんなさい。
DIVの中に、高さを算出する目的でIMG要素を入れる。
表示は背景でやる。
IMG要素のsrc属性の値は背景の画像と一緒で、visibility:hidden;とかopacity:0;にする。
DIVはmax-height:400px;
以下でたぶんいけました。
.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でした。
……って、これを直したところでちゃんとした挙動にはならないみたいだし、
質問者さんがすでに解決できているみたいですね。
No.2
42859
30pt
divタグにcssで、width:100%;height:400px;background-image:url('/hoge.gif');background-repeat:no-repeat;background-position:center center;
で、どうですか。
それだと300pxの高さの画像をアップロードしたときに、100pxの無駄な余白が出きてしまいますね。高さが指定できれば簡単なんですが。。
heightの指定はなしで、ダミーのdivタグを中に入れて、400以上なら400、400以下の場合はそのheightを画像の高さに合わせるというのは、どうですか。アップロードされた時点で、画像の高さは取れますよね。
a-kuma3
2014/12/06 00:33:35
30
25
dekapurio
河津武志
以下でたぶんいけました。
2014/12/06 12:08:43.A {
max-height: 400px;
width: 100%;
background: url(...) center center no-repeat;
}
.A IMG {
visibility: hidden;
opacity: 0;
max-width: 100%;
}
＞DIVにoverfrow:hidden;でどうでしょう？
2014/12/06 12:31:51ごめんなさい。overfrowじゃなくてoverflowでした。
……って、これを直したところでちゃんとした挙動にはならないみたいだし、
質問者さんがすでに解決できているみたいですね。