如何在div中创建一个图像来填充整个div?

Currently I'm using this code:

目前我正在使用这段代码:

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

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

The output is like, the image stays in 1/4 of the div. How can I make the image fill the whole? I already checked the image and it has no extra whitespace.

输出是这样的，图像保持在div的1/4。我如何让图像填充整个div ?我已经检查了图像，它没有额外的空白。

6 个解决方案

#1

If you don't want to use background image

如果你不想使用背景图像。

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

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

But pay attention to the support: http://caniuse.com/#search=object-fit

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

#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>

#3

You should use

你应该使用

<div class="container">
 <img src="http://i48.tinypic.com/wrltuc.jpg" />
</div>

.container {
    width: 700px;
    height: 400px;
    background: #444;
    margin: 0 auto;
    border: solid black 1px;
}
.container img{
    width: 100%;
    height: 100%;
}

Fiddle Here

小提琴在这里

#4

Try this:

试试这个:

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

#5

You could create some css class like this:

可以创建这样的css类:

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

#6

It looks like you're trying to add the image into the div using CSS rather than inline in the HTML... I will assume you've got a good reason for this and follow suit. Instead of using "content:" you can drop the image in as a background and make it spread to fill the container.

看起来你是想用CSS而不是内联的方式将图像添加到div中…我假设你有一个很好的理由。而不是使用“content:”，您可以将图像作为背景，并使其扩展以填充容器。

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

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

The benefit of using this "background-size:cover" technique is that your image will always fill the containing div regardless of its proportions.

使用这种“背景大小:覆盖”技术的好处是，无论div的比例如何，您的映像都将始终填充包含的div。

#1