1

元の画像 (2880 x 900) は次のとおりです。 ここに画像の説明を入力

レンダリングされたページ (1280 x 500) での表示方法は次のとおりです。 ここに画像の説明を入力

1280 x 500 は、<div>背景として画像を含む の寸法です。お気づきのように、レンダリングされた背景は、元の画像よりも小さい div 内に収まるように縮小するのではなく、切り取られています。私の理解では、 abackground-size: coverはトリミングせずに画像を拡大または縮小するためのものです。なぜ機能しないのですか？

HTML

<div class="page-header-div">
    <div class="page-header-div-image-blog" style="background: url(<?php echo $bannerurl ?>) no-repeat;"></div>
    <div class="downarrow text-center downarrow1" onclick="scrollPage(this);"><i class="fa fa-chevron-down"></i></div>
</div>

CSS

.page-header-div { position: relative; }
.page-header-div-image-blog {
  background-size: cover;
  height: 100%;
}

別のページのまったく同じマークアップは問題なく機能します。2 つのページには、スニペットに使用されているタグがまったく同じです。この問題を CSS で解決する方法はありませんか? もしそうなら、どうすれば JS を使用してそれを行うことができますか (可能であれば、それを避けたいと思います)。

4

3 に答える 3

0 

div {
  width: 1280px;
  height: 500px;
  background-image: url(http://i.stack.imgur.com/rf8Wg.jpg);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
<div></div>

于 2016-01-30T00:05:46.657 に答える