img在div裏面的背景中最大化

我已經擺弄了一段時間了，但我還是不明白應該怎麼做。img在div裏面的背景中最大化

我希望圖像在itemtemplate div的背景下最大化（100％/ 100％），但現在它只是使它適合在250像素/ 250像素的div內。

<div class="itemtemplate" data-win-control="WinJS.Binding.Template"> 
    <img style="-ms-grid-row-span: 2;" src="#" data-win-bind="src: backgroundImage; alt: title" /> 
    <div class="item-overlay"> 
     <h4 class="item-title" data-win-bind="textContent: title"></h4> 
     <h6 class="item-subtitle win-type-ellipsis" data-win-bind="textContent: subtitle"> 
     </h6> 
    </div> 
</div>

任何想法？謝謝。

來源

2012-03-14 danielovich

需要使用CSS背景圖像。

div.itemtemplate 
{ 
    background:url(PATH_TO_IMAGE); 
    background-size:100% 100%; 
    background-repeat:no-repeat; 
}

請參閱下面的網站以獲取更多信息。

http://www.w3schools.com/cssref/pr_background-image.asp

來源

2012-03-14 12:25:08 westo

需要注意的是，這只是在現代瀏覽器的支持是非常重要的。這裏是一個更好的參考CSS背景大小：https：//developer.mozilla.org/en/CSS/background-size – 2012-03-14 12:37:18

@CalebKester什麼瀏覽器你認爲現代？ – westo 2012-03-14 12:40:26

現代瀏覽器是用於支持HTML5和CSS3的最新版瀏覽器的術語。具體查看哪些瀏覽器支持後臺大小：https：//developer.mozilla.org/en/CSS/background-size#section_6 – 2012-03-14 12:45:25

我不熟悉您正在使用的屬性。但是，爲了使用背景圖像。有幾種方法。

如果是<body>或<table>您還可以通過使用做這樣的事情
```
<body background="link/to/image.jpg"> 
```
但全球的方式，其中每個元素的支持將是使用CSS
來定義它們定義它們
```
<div style="background-image: url("link/to/image")">...</div> 
```

現在，即將到來Ë圖像部分

每當你使用的是背景圖片，

它永遠不會重新大小，以適應容器。除非你使用CSS3。

/* CSS3 Snippet to resize a background */ 
div 
{ 
    background-image:url("link/to/image"); 
    -moz-background-size:80px 60px; 
    background-size:80px 60px; 
    background-repeat:no-repeat; 
}

如果容器很大，它會開始重複自己填充區域。可以控制哪些重複或不重複。像

div { 
    background-image: url("link/to/image"); 
    background-repeat: no-repeat; /* similary repeat-x and repeat-y */ 
}

但是，你想什麼用<img />到行爲作爲背景，這是錯誤的語義使用，我不建議這樣做。

來源

2012-03-14 12:31:06 Starx

您可以絕對定位圖像，並在CSS文件中將高度和寬度設置爲100％。

.itemtemplate > img { 
    position: absolute; 
    top: 0; 
    left: 0; 
    height: 100%; 
    width: 100%;  
}

只要確保你記得父DIV和.itemtemplate的其他孩子相對位置：

.itemtemplate, .itemtemplate > div { 
    position: relative; 
}

家長需要相對定位，以確保img位於該元素中。父項的其他子項需要相對定位以確保它們在img之上被繪製（因爲定位元素是在靜態元素之後繪製的）。如果您在查看其他子元素時遇到問題，則可以設置其z-index。

工作例如：http://jsfiddle.net/sjsNJ/

來源

2012-03-14 12:33:23

擊敗我:)這是另一個工作的例子，以防萬一你有Z指數問題：http://jsfiddle.net/yeQkv/ – 2012-03-14 12:43:09

img在div裏面的背景中最大化

回答

相關問題