1

h-align/v-align を中心にして大きな画像を小さな div に配置するにはどうすればよいでしょうか。画像は div の外側に表示されないようにする必要があります (一種のoverflow:hidden)。また、div はページ サイズに基づいてサイズを変更します。

他の質問/回答の助けを借りて、div の背景と css を試しましたが、画像を h-center のみに揃えています。

jsFiddle - http://jsfiddle.net/yesprasoon/9tLcV/ .

h-center と v-center の両方を揃えるには? また、垂直スクロールバーがあってはなりません。あらゆるページ サイズと (可能であれば) あらゆる画像サイズで動作するはずです。CSSだけで可能？

4

1 に答える 1

1

画像のサイズ変更に問題がないかどうかはわかりませんが、background-sizeプロパティを使用できます

.imageContainer {
  background-size:cover;
}

これが私の例です: JSFIDDLE

編集

あなたのコメントの後、私は最終的に問題を理解しました。背景画像を垂直方向に中央揃えすることはできますが、これは機能しますが、ページの高さが動的に変化すると垂直方向の中央揃えは適応しません。その理由は、imageContainerdiv の高さが固定されているため、div自体の高さがページの高さによって変化しないためです。

それを改善するためにできることは、あなたimageContainerの身長を高くすることです100%。ただし、拡張する body/html も必要です100%。そうしないと、コンテンツがない場合に div の高さがなくなるか、コンテンツが少ない場合は短すぎます。

JsFiddle は body/html スタイルをうまく処理できないので (私が知らないトリックがあるのか​​もしれません)、私の例をcodepenに置きました。

HTML

<div class="imageContainer" style="background-image: url('http://www.taiwanholidays.com.au/util/image.jsp?l=791');"></div>

CSS

html,body {
  width:100%;
  height:100%;
  margin:0
}
.imageContainer {
  margin:0; 
  height:100%;
  width:100%;
  overflow:hidden; 
  background-position:center center;
  background-repeat:no-repeat;
}
于 2013-10-25T22:19:29.287 に答える