Question

目前我正在使用此代码：

<style type="text/css">
   .icondiv{
      border:1px solid;
      content: url(image.png) 100% 100%;
   }
</style>

<div class="icondiv"></div>

输出就像，图像保持在div的1/4。如何使图像填满整体？我已经检查了图像，它没有额外的空白。

Answer 1

如果您不想使用背景图片

＆＃13;

.container{
  width: 400px;
  height: 100px;
}
.container img{
  width: 100%;
  height: auto;
}
@supports(object-fit: cover){
    .container img{
      height: 100%;
      object-fit: cover;
      object-position: center center;
    }
}

＆＃13;

<div class="container">
  <img src="http://i62.tinypic.com/2dh8y1g.jpg" alt="" />
</div>

＆＃13;

但要注意支持：http://caniuse.com/#search=object-fit

Answer 2

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
.icondiv {
    width: 400px;
    height: 100px;
    border: 1px solid #f00;
    position: relative;
}
.icondiv img {
    position: absolute; top: 0; left: 0;
    width: 100%;
    height: 100%;
}

<div class="icondiv">
    <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSL19OsbasMqU64_o3uoov5liyKmD8KMStU1OR8hXUtV4pwALr7Sg" alt="" />
</div>

Answer 3

你应该使用

app.controller('myCtrl', function(a) {
    a.firstName = "John";
    a.lastName = "Doe";
});

app.controller('myCtrl', ['$scope', function(a) {
    a.firstName = "John";
    a.lastName = "Doe";
}]);

小提琴Here

Answer 4

试试这个：

.icondiv{
  border:1px solid;
  background: url(yourimage.png) no-repeat center center;
  background-size: cover;
  width: 200px; // Adjust your needs
  height: 200px; // Adjust your needs
}

Answer 5

你可以像这样创建一些css类：

full {
  background-image: url(image_path('yourimage.jpg'));
  background-repeat: no-repeat;
  background-position:  center;
  background-attachment: fixed;
  background-size: cover;
}

Answer 6

看起来您正在尝试使用CSS而不是HTML中的内联将图像添加到div中...我会假设您有充分的理由并遵循此操作。而不是使用＆＃34;内容：＆＃34;您可以将图像作为背景放入并使其展开以填充容器。

＆＃13;

.container {
    width: 700px;
    height: 400px;
    background:#f00 url(http://i48.tinypic.com/wrltuc.jpg) no-repeat center center;
    background-size:cover;
    margin: 0 auto;
    border: solid black 1px;
}

＆＃13;

<div class="container">
</div>

＆＃13;

使用此功能的好处＆＃34;背景大小：封面＆＃34;技术是你的图像将始终填充包含div，无论其比例如何。

如何在div中制作图像填满整个div？

6 个答案: