40

背景画像を含む図のリストがあります。次のようなもの：

<ul>
  <li>
    <figure style="background-image: url(...);"></figure>
  </li>
  <li>
    <figure style="background-image: url(...);"></figure>
  </li>
  <li>
    <figure style="background-image: url(...);"></figure>
  </li>
</ul>

これらの各イメージには、と にbackground-size設定されています。coverbackground-attachmentfixed

figure {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-attachment: fixed;
}

各図がビューポート全体を占める場合、これはうまく機能しますが、何らかのオフセットがある場合、背景画像が切り取られます。

私が知る限り、これは設計によるものです ( https://developer.mozilla.org/en-US/docs/Web/CSS/background-size#Values )。

画像を垂直または水平のいずれかで切り取って、両方ではなく、図自体のサイズで中央に配置したいと思います。

JavaScript ソリューションがあることは知っていますが、CSS を使用してこれを行う方法はありますか?

これが実際の例です: http://codepen.io/Godwin/pen/KepiJ

4

9 に答える 9

63

残念ながら、これは CSS で固定配置がどのように機能するかの単純なアーティファクトであり、純粋な CSS ではこれを回避する方法はありません。Javascript を使用する必要があります。

これが起こる理由は、 と の組み合わせによるものbackground-attachment: fixedですbackground-size: cover。これを指定するbackground-attachment: fixedと、基本的background-imageに が画像であるかのように動作しますposition: fixed。つまり、ページ フローと配置コンテキストから取り出され、背景画像である要素ではなく、ビューポートに対して相対的になります。

したがって、これらのプロパティを一緒に使用するときはいつでもcover、要素自体のサイズに関係なく、ビューポートのサイズを基準にして値が計算されます。これが、要素がビューポートと同じサイズであるがトリミングされている場合に期待どおりに機能する理由です。要素がビューポートよりも小さい場合の予期しない方法。

これを回避するには、基本的に、イベント リスナーを使用して JSbackground-attachment: scrollのイベントにバインドする必要があります。これは、固定位置をシミュレートするためにウィンドウがスクロールされた距離に関連して手動で更新しますが、ビューポートではなくコンテナー要素に相対的に計算します。 .scrollbackground-positionbackground-size: cover

于 2014-05-22T15:26:06.740 に答える
3

Nick Noordijk の答えは私を正しい軌道に乗せましたが、スクロール イベントが発生するたびに計算を実行するスクリプトは避けたいと思います。ページの読み込み時または画面サイズの変更時にのみ計算を実行する私のバージョンは次のとおりです。

html:

<div class="fake-img"></div>

CSS:

.fake-img {
    display: block;
    height: 280px;  /* set the height here */
    width: 100%;
    background-image: url('http://example.com/path/to/image.jpg');
    background-repeat: no-repeat;
    background-position: center 68px;
    background-size: auto 50%; /* make a "best guess" here as a default */
    background-attachment: fixed;
    position: relative;
}

jQuery:

$(window).on('resize load orientationchange', function(){
    responsive_calc();
});

var responsive_calc = function(){

    // get the viewport height
    var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

    // get the element height
    var bannerHeight = $('.fake-img').height();

    // get the integer percentage value difference between them
    var bgHeightPercent = Math.ceil(bannerHeight/h*100);

    // set background-size height to match the element instead of the viewport
    $('.fake-img').css('background-size', 'auto ' + bgHeightPercent + '%');
}

これは実際には横向きの「バナー」画像でのみ機能することに注意してください。画像がどちらの方向にも余分にあるかどうかに関係なく、を使用background-size: auto nn%しても機能するという同じ利点はありません。background-size: cover

于 2016-08-13T22:44:01.220 に答える
0

もう 1 つの非常に簡単な解決策は、vwandvhユニットを使用することです (ご存じないかもしれませんが、これは、ほとんどの場合、完全にまずまずのブラウザー サポートを備えています)。たとえば、 を行う代わりに、 をbackground-size: cover行いますbackground-size: auto 100vh。

vwとに慣れていない場合vh、これらはビューポートの単位であり、ビューポートの幅とビューポートの高さに対応しています。値は、ビューポートの高さまたは幅のパーセンテージに対応します。たとえば50vw、ビューポート幅の 50% を意味します。

この目的のために、背景がビューポートの高さの 100% になるように単純に指示できます。

これがフィドルです。

異なるアスペクト比に対応する必要がある場合は、アスペクト比 @media ルールを利用できます。

于 2018-07-24T15:46:31.680 に答える
-6

レスポンシブの背景画像を使用したバージョンを作成しました。

.flexslider .slides > li {
  background-position: center center;
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
#slider,
.alink {
  min-height: 300px
}
.alink {
  display: block
}

http://jsfiddle.net/onigetoc/grpku1gk/

于 2016-11-30T06:26:34.767 に答える