如何解决IE的背景大小：cover问题？ [英] How to fix the IE's background-size:cover issue?

问题描述

我已经搜索网络的解决方案，但所有的人都在谈论如何设置整个页面的背景...但我需要填写页面的某一部分....我该怎么做那么？

这是我们在我们的页面上，我们有几个不同的部分，在其中一个我需要设置图像的背景大小cover（这是我使用这个属性的唯一时间）。这是我用来生成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/'）; 
 
 //获取视频播放器网址
 $ 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 =prettyVideoshref ='。$ 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和歌剧。

但是，通常，它在IE（7/8）搞砸了

如何解决这个问题？

解决方案

IE7不以任何方式支持 background-size 。

唯一的方法是切换到使用< img> 标签，并将其放在元素后面，以便它看起来像是背景。

你可以在代码中这样做;这不难。但是，在每个其他浏览器中浪费 background-size 功能的存在将是一种耻。。

我的首选解决方案是使用polyfill Javascript，这将回填旧版本的IE的功能，以便你可以继续使用标准的CSS。

你可以试试这个一个： https://github.com/louisremi/jquery.backgroundSize.js p>

希望有帮助。

I have searched the web for solutions, but all of them were talking about how to set the background for the whole page...but i need to fill out a certain section of the page....how can i do that?

Here's what we have.....on our page, we have several different sections and in one of them i need to set the image's background-size to "cover" (this is the only time i am using this property). This is the php function I'm using to generate img tag:

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

and 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;
}

So far it's working exactly how I was hoping for in Chrome, Safari, Firefox and Opera.

However, as usually, it's messed up in IE (7/8)

How can i fix this?

解决方案

IE7 doesn't support background-size in any way. It can only show the image at it's natural size.

The only way around this is to switch to using an <img> tag, and layer it behind the element, so that it looks as if it were the background.

You could do that in your code; it's not difficult. But it would be a shame to waste the existence of the background-size feature in every other browser.

So my preferred solution would be to use a polyfill Javascript, which would backfill the feature in older versions of IE so that you can keep using the standard CSS.

You could try this one: https://github.com/louisremi/jquery.backgroundSize.js

Hope that helps.

这篇关于如何解决IE的背景大小：cover问题？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！