dekapurio回答ポイント 300ptウォッチ

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

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

• はてなアカウントでログイン
• 無料ユーザー登録

ベストアンサー

• 河津武志2014/12/06 02:23:43

  満足270pt

  イケてない方法だなと思うけど、一つ思いついたので書きます。
  読解力無いので質問の意図を勘違いしていたらごめんなさい。
  
  DIVの中に、高さを算出する目的でIMG要素を入れる。
  表示は背景でやる。
  IMG要素のsrc属性の値は背景の画像と一緒で、visibility:hidden;とかopacity:0;にする。
  DIVはmax-height:400px;

  スター

  • 

    10件のコメントを見る

  • dekapurio 2014/12/06 03:40:37

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

    スター

  • 河津武志 2014/12/06 03:48:03

    DIVにoverfrow:hidden;でどうでしょう？

    スター

  • dekapurio 2014/12/06 10:26:07

    overfrow:hidden;
    でも駄目ですね…imgタグの分がはみだしてしまいますね。

    スター

  • a-kuma3 2014/12/06 11:18:35

    こんな感じでどうでしょう。

    <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 2014/12/06 11:28:54

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

    スター

  • a-kuma3 2014/12/06 11:30:13

    あー、画像がちっちゃいときにも 400px になっちゃうか。
    height: 400px; を削っても一緒だな...

    スター

  • a-kuma3 2014/12/06 11:37:34

    また、.A IMGでwidth: 100%;についてですが、縦も縮小されてしまうと思います。

    縮小されないですよ。試してから書いてます。
    
    ＃ って、一回コメントを消したのは、背景画像のサイズがちょっと違ってたからなんですが　(^^;

    スター

  • dekapurio 2014/12/06 12:02:38

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

    スター

  • 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%;
    }

    スター

  • 河津武志 2014/12/06 12:31:51

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

    スター

その他の回答

• POGPI2014/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;
  で、どうですか。

  スター

  • 

    2件のコメントを見る

  • dekapurio 2014/12/06 10:29:51

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

    スター

  • POGPI 2014/12/06 11:36:42

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

    スター

この質問へのコメント

• a-kuma32014/12/06 00:33:35
  ＞・縦は400pxまでにしたい（400pxを超えている場合は centerで切り抜き、横幅はそのまま）
  「切り抜き」ってのが、css だけだと難しそうな。
  切り抜きだけだと、clip でいけるけど、サイズを指定しなきゃいけないからなあ。
• dekapurio2014/12/06 01:09:18
  以下のcssみたいに、縦が500pxあれば上50pxと下50pxは表示しないという、本来ならなんてことないことなんですけどね。
  div.abc {
  height: 400px;
  background: url(...) center center no-repeat;
  }
  高さが指定できないというのが最大の問題なんですよね。
• dekapurio2014/12/06 13:12:58
  ん～やはり駄目でした。
  ・横2500px、縦300pxとかの画像だとdivの高さがブラウザ幅に応じて縮小してしまう
  ・400px以下の画像だと余白が出てしまう
  結局振り出しに戻った感じです。。
• 河津武志2014/12/07 00:18:44
  横方向の左右の端もカットされる仕様でしたか。
  それならやはり2014/12/06 03:48:03のコメントの
  overfrowをoverflowにすればいけると思います。
  
  画像を4パターン用意してテストのページを作ってみました。
  http://jislotz.net/test/test.html
• dekapurio2014/12/07 03:01:57
  素晴らしいですね。
  思い描いていた挙動になっています。
  どうも有難うございました！

質問の情報

登録日時

2014-12-05 21:44:19

終了日時

2014-12-06 12:40:05

回答条件

1人1回まで

この質問のカテゴリ

• ウェブ制作

この質問に含まれるキーワード

人気の質問

• この英文どうなってますか？ The boy seemed to be waiting for his mother to come.（その少年は母親が来…匿名質問者112日前
• 不定詞の形容詞的用法らしいんですけど、副詞的用法と書いたら✖️ですか？ I want to buy a book to read …匿名質問者112日前
• 日向陽葵という○V女優が好きなのですが似ている○V女優はいますか匿名質問者17時間前
• 共通テストで使われるプログラミング言語は共通テスト特有の言語と聞いたのですが、受験勉強で身につけたプ…匿名質問者117時間前
• 内定してほしいポケモンはいますか？匿名質問者18時間前

メニュー

• 質問一覧
• カテゴリ一覧
• 無料ユーザー登録
• 人力検索はてなトップ

PC版

• お問い合わせ
• ヘルプ
• お知らせ
• はてなトップ