1

Web で解決策を検索しましたが、それらはすべて、ページ全体の背景を設定する方法について話していました...しかし、ページの特定のセクションに記入する必要があります....どうすればそれを行うことができますか?

これが私たちが持っているものです...私たちのページにはいくつかの異なるセクションがあり、そのうちの1つで画像の背景サイズを「カバー」に設定する必要があります(これは私がこのプロパティを使用している唯一の時間です)。これは、img タグを生成するために使用している php 関数です。

function getRandomFeatureVideo()
{
// Youtube feed
$xml = simplexml_load_file('https://gdata.youtube.com/feeds/api/playlists/A4F160EDF82713A2?v=2');
.
.
.
.
$media = $entry->children('http://search.yahoo.com/mrss/');
  
  // get video player URL
  $attrs = $media->group->player->attributes();
  $watch = $attrs['url'];
  
  $attrs = $media->group->thumbnail[1]->attributes();
  $thumbnail = $attrs['url'];
  $counter++;

  if($counter == $rand)
    { break; }

  $result .='<a rel="prettyVideos"  href="'.$watch.'">
                <img alt="" style="background:url('.$thumbnail.')" src="/images/ytIndex_overlay.png" />
       </a> ';      
    
echo $result;                    
}

およびCSS:

.slideshow .video img
{   
cursor:pointer;
width:550px !important;     
height:340px !important;     
background-repeat:no-repeat;    
background-size:cover;
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover;
-ms-interpolation-mode: bicubic;
}

これまでのところ、Chrome、Safari、Firefox、Opera で期待どおりに動作しています。 ここに画像の説明を入力

ただ、いつものようにIEでめちゃくちゃです(7/8) ここに画像の説明を入力

どうすればこれを修正できますか?

4

3 に答える 3

2

IE7はbackground-sizeいかなる方法でもサポートしていません。自然なサイズでのみ画像を表示できます。

これを回避する唯一の方法は、タグの使用に切り替えて<img>、要素の後ろに重ねて、背景のように見せることです。

あなたはあなたのコードでそれをすることができます。それは難しいことではありません。background-sizeしかし、他のすべてのブラウザにこの機能が存在することを無駄にするのは残念です。

したがって、私の好ましい解決策は、ポリフィルJavascriptを使用することです。これにより、古いバージョンのIEの機能がバックフィルされ、標準のCSSを引き続き使用できるようになります。

これを試すことができます：https ：//github.com/louisremi/jquery.backgroundSize.js

お役に立てば幸いです。

于 2012-07-25T21:00:03.547 に答える
0

同様の問題を抱えている人を見つけました。多分あなたはこれをチェックすることができます: css background-size cover in Internet Explorer 7

于 2012-07-25T19:51:13.327 に答える
0

私は他の問題に取り組むためにこの問題を取り下げなければなりませんでしたが、これに関する最新情報を皆さんに提供する必要があると考えました. この問題は (一種の) 修正されています...確実な解決策ではありませんが、この簡単な修正で機能しています。

これが変更されたCSSです...

.slideshow .video img { cursor:pointer; width:550px !important;
height:340px !important; -moz-background-size:cover; -webkit-background-size: cover; -o-background-size: cover; background-size: cover; background-position:center;}

そしてIMGタグ…

<img alt="" style="background:url('.$thumbnail.')" src="/images/ytIndex_overlay.png" style="background-repeat: no-repeat" style="background-size:cover"/>

(私はそれが厄介であることを知っています!) あなたの時間と提案のために、Spudley、Shadowizoo、BoltClock、および Ben に感謝します。

于 2013-05-21T21:36:20.277 に答える