背景画像･css関連の質問です｡横幅が3000px､縦幅400pxの画像があるとします｡これをhtmlに直接 <img src="aaa.jpg"> などで表示すると､ﾌﾞﾗｳｻﾞの画面からはみ出して…

人力検索はてな

ﾓﾊﾞｲﾙ版を表示しています｡PC版はこちら

背景画像･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を画像の高さに合わせるというのは､どうですか｡ｱｯﾌﾟﾛｰﾄﾞされた時点で､画像の高さは取れますよね｡