Question

我已经习惯了一段时间，但我仍然不明白应该怎么做。

我希望图像在itemtemplate div的背景中最大化（100％/ 100％），但是现在它只是使它适合250px / 250px的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>

有什么想法吗？ THX。

Answer 1

您可以绝对定位图像，并在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/

Answer 2

需要使用CSS background-image。

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

有关详情，请参阅以下网站。

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

Answer 3

我不熟悉您正在使用的属性。但是，为了使用图像作为背景。有几种方法。

如果是<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 /> 行为作为背景，这在语义上是错误的，我不推荐它。

img在div中的背景中最大化

3 个答案: