Fatal编程技术网
  • css/
  • Css img在div内的背景中最大化

Css img在div内的背景中最大化

css

Css img在div内的背景中最大化,css,Css,我已经摆弄这个有一段时间了，但我仍然不明白该怎么做 我希望图像在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: backgroundI

我已经摆弄这个有一段时间了，但我仍然不明白该怎么做

我希望图像在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.

需要使用CSS背景图像

div.itemtemplate
{
    background:url(PATH_TO_IMAGE);
    background-size:100% 100%;
    background-repeat:no-repeat;
}
有关更多信息，请参阅下面的网站

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

  • 如果是
    或
    ，您也可以使用这样的操作来定义它们

    <body background="link/to/image.jpg">
  • 如果容器很大，它将开始重复自身以填充该区域。可以控制重复或不重复。像

    div { 
    background-image: url("link/to/image");
    background-repeat: no-repeat; /* similary repeat-x and repeat-y */
}
    • 但是，您试图使用
    来作为背景，这在语义上是错误的，我不推荐使用它。

    您可以绝对定位图像，并在CSS文件中将高度和宽度设置为100%

    .itemtemplate > img {
    position: absolute;
    top: 0;
    left: 0;  
    height: 100%;
    width: 100%;    
}
    只需确保记住相对定位.itemtemplate的父div和其他子项：

    .itemtemplate, .itemtemplate > div {
    position: relative;
}
    父项需要相对定位，以确保
    img
    位于该元素内。父元素的其他子元素需要相对定位，以确保它们绘制在img上方（定位后的元素绘制在静态元素之后）。如果无法看到其他子元素，则可以设置它们的z索引

    工作示例：

    请务必注意，这仅在现代浏览器中支持。这里有一个更好的css背景尺寸参考：@calebkenster您将哪些浏览器归类为现代浏览器？现代浏览器是用于支持HTML5和CSS3的最新版本浏览器的术语。要查看具体哪些浏览器支持背景大小：@westo如果这是一个严肃的问题，如果是/sarcasm，那么请检查IE是否会失败！：）请告诉我：）如果您遇到z索引问题，这里有另一个工作示例： 
    .itemtemplate > img {
    position: absolute;
    top: 0;
    left: 0;  
    height: 100%;
    width: 100%;    
}

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