CSS 3：图像不能获得100％的div

Question

我有一个显示图像的div。图像大于其包含的div。

不知怎的，我在图像的顶部和底部都有空间。

＆＃13;

＆＃13;

.image_contain_div {
  height: 130px;
  padding: 5px;
  width: 180px;
  border: thin black solid;
  /* Firefox */
  display: -moz-box;
  -moz-box-orient: horizontal;
  -moz-box-pack: center;
  -moz-box-align: center;
  /* Safari and Chrome */
  display: -webkit-box;
  -webkit-box-orient: horizontal;
  -webkit-box-pack: center;
  -webkit-box-align: center;
  /* W3C */
  display: box;
  box-orient: horizontal;
  box-pack: center;
  box-align: center;
  /* IE10 -Doesn't work yet! */
  display: -ms-flexbox;
  -ms-flex-align: center;
  -ms-flex-pack: center;
  -ms-box-orient: horizontal;
}
.image_contain_div .image_div {
  background: #000;
  /* Firefox */
  display: -moz-box;
  -moz-box-orient: horizontal;
  -moz-box-pack: center;
  -moz-box-align: center;
  /* Safari and Chrome */
  display: -webkit-box;
  -webkit-box-orient: horizontal;
  -webkit-box-pack: center;
  -webkit-box-align: center;
  /* W3C */
  display: box;
  box-orient: horizontal;
  box-pack: center;
  box-align: center;
  /* IE10 -Doesn't work yet! */
  display: -ms-flexbox;
  -ms-flex-align: center;
  -ms-flex-pack: center;
  -ms-box-orient: horizontal;
  height: 100%;
  width: 100%;
  position: relative;
}
.image_contain_div .image_div .custom_website_default_image_div {
  /* Firefox */
  display: -moz-box;
  -moz-box-orient: horizontal;
  -moz-box-pack: center;
  -moz-box-align: center;
  /* Safari and Chrome */
  display: -webkit-box;
  -webkit-box-orient: horizontal;
  -webkit-box-pack: center;
  -webkit-box-align: center;
  /* W3C */
  display: box;
  box-orient: horizontal;
  box-pack: center;
  box-align: center;
  /* IE10 -Doesn't work yet! */
  display: -ms-flexbox;
  -ms-flex-align: center;
  -ms-flex-pack: center;
  -ms-box-orient: horizontal;
}
.image_contain_div .image_div .custom_website_default_image_div svg {
  width: 26px;
  height: 26px;
}
.image_contain_div .image_div img {
  max-width: 100%;
  max-height: 100%;
}
.image_contain_div .image_div .custom_website_image_overlay_div {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: none;
}
.image_contain_div .image_div .custom_website_image_overlay_div svg {
  width: 30px;
  height: 30px;
}
.image_contain_div .image_div:hover .custom_website_image_overlay_div {
  /* Firefox */
  display: -moz-box;
  -moz-box-orient: horizontal;
  -moz-box-pack: center;
  -moz-box-align: center;
  /* Safari and Chrome */
  display: -webkit-box;
  -webkit-box-orient: horizontal;
  -webkit-box-pack: center;
  -webkit-box-align: center;
  /* W3C */
  display: box;
  box-orient: horizontal;
  box-pack: center;
  box-align: center;
  /* IE10 -Doesn't work yet! */
  display: -ms-flexbox;
  -ms-flex-align: center;
  -ms-flex-pack: center;
  -ms-box-orient: horizontal;
}

＆＃13;

<div class="image_contain_div b">
    <div class="image_div ">

        <img src="https://d28hsb6vkzynsw.cloudfront.net/banner/2877/500/99041_banner_testfile.jpeg" alt="">

        <div class="custom_website_image_overlay_div">
            <span class="cursor_pointer">
                <svg  class="v-middle" style="enable-background:new 0 0 33.004 33.004;" viewBox="0 0 33.004 33.004"  x="0px" xmlns="http://www.w3.org/2000/svg" y="0px">
                    <path  d="M33.004,15.414H17.59V0h-2.176v15.414H0v2.176h15.414v15.414h2.176V17.59h15.414V15.414z" style="fill:#fff;"></path>
                </svg>
            </span>
        </div>

    </div>
</div>

＆＃13;

＆＃13;

＆＃13;

我想将图像覆盖到黑色背景div。

注意：如果图像小于div，那么它应该在div的中间。

任何帮助都会很棒。

谢谢。

Answer 1

如果您不介意使用样式属性，可以将图像设置为background-image，将background-size设置为cover，如下所示：

＆＃13;

＆＃13;

 .image_div {
   background: no-repeat center;
   background-size: cover;
 }

＆＃13;

<div class="image_contain_div b">
  <div class="image_div" style="background-image: url('https://d28hsb6vkzynsw.cloudfront.net/banner/2877/500/99041_banner_testfile.jpeg')">

    <div class="custom_website_image_overlay_div">
      <span class="cursor_pointer">
                    <svg  class="v-middle" style="enable-background:new 0 0 33.004 33.004;" viewBox="0 0 33.004 33.004"  x="0px" xmlns="http://www.w3.org/2000/svg" y="0px">
                        <path  d="M33.004,15.414H17.59V0h-2.176v15.414H0v2.176h15.414v15.414h2.176V17.59h15.414V15.414z" style="fill:#fff;"></path>
                    </svg>
                </span>
    </div>

  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

添加：

.image_div img {
  object-fit: cover;
  min-height: 100%;
}

像你这样的CSS中的

：

＆＃13;

＆＃13;

.image_contain_div {
  height: 130px;
  padding: 5px;
  width: 180px;
  border: thin black solid;
  /* Firefox */
  display: -moz-box;
  -moz-box-orient: horizontal;
  -moz-box-pack: center;
  -moz-box-align: center;
  /* Safari and Chrome */
  display: -webkit-box;
  -webkit-box-orient: horizontal;
  -webkit-box-pack: center;
  -webkit-box-align: center;
  /* W3C */
  display: box;
  box-orient: horizontal;
  box-pack: center;
  box-align: center;
  /* IE10 -Doesn't work yet! */
  display: -ms-flexbox;
  -ms-flex-align: center;
  -ms-flex-pack: center;
  -ms-box-orient: horizontal;
}
.image_contain_div .image_div {
  background: #000;
  /* Firefox */
  display: -moz-box;
  -moz-box-orient: horizontal;
  -moz-box-pack: center;
  -moz-box-align: center;
  /* Safari and Chrome */
  display: -webkit-box;
  -webkit-box-orient: horizontal;
  -webkit-box-pack: center;
  -webkit-box-align: center;
  /* W3C */
  display: box;
  box-orient: horizontal;
  box-pack: center;
  box-align: center;
  /* IE10 -Doesn't work yet! */
  display: -ms-flexbox;
  -ms-flex-align: center;
  -ms-flex-pack: center;
  -ms-box-orient: horizontal;
  height: 100%;
  width: 100%;
  position: relative;
}
.image_contain_div .image_div .custom_website_default_image_div {
  /* Firefox */
  display: -moz-box;
  -moz-box-orient: horizontal;
  -moz-box-pack: center;
  -moz-box-align: center;
  /* Safari and Chrome */
  display: -webkit-box;
  -webkit-box-orient: horizontal;
  -webkit-box-pack: center;
  -webkit-box-align: center;
  /* W3C */
  display: box;
  box-orient: horizontal;
  box-pack: center;
  box-align: center;
  /* IE10 -Doesn't work yet! */
  display: -ms-flexbox;
  -ms-flex-align: center;
  -ms-flex-pack: center;
  -ms-box-orient: horizontal;
}
.image_contain_div .image_div .custom_website_default_image_div svg {
  width: 26px;
  height: 26px;
}
.image_contain_div .image_div img {
  max-width: 100%;
  max-height: 100%;
}
.image_contain_div .image_div .custom_website_image_overlay_div {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: none;
}
.image_contain_div .image_div .custom_website_image_overlay_div svg {
  width: 30px;
  height: 30px;
}
.image_contain_div .image_div:hover .custom_website_image_overlay_div {
  /* Firefox */
  display: -moz-box;
  -moz-box-orient: horizontal;
  -moz-box-pack: center;
  -moz-box-align: center;
  /* Safari and Chrome */
  display: -webkit-box;
  -webkit-box-orient: horizontal;
  -webkit-box-pack: center;
  -webkit-box-align: center;
  /* W3C */
  display: box;
  box-orient: horizontal;
  box-pack: center;
  box-align: center;
  /* IE10 -Doesn't work yet! */
  display: -ms-flexbox;
  -ms-flex-align: center;
  -ms-flex-pack: center;
  -ms-box-orient: horizontal;
}

.image_div img {
  object-fit: cover;
  min-height: 100%;
}

＆＃13;

<div class="image_contain_div b">
                                        <div class="image_div ">


                                          <img src="https://d28hsb6vkzynsw.cloudfront.net/banner/2877/500/99041_banner_testfile.jpeg" alt="">

                                          <div class="custom_website_image_overlay_div">
                                            <span class="cursor_pointer">
                                              <svg  class="v-middle" style="enable-background:new 0 0 33.004 33.004;" viewBox="0 0 33.004 33.004"  x="0px" xmlns="http://www.w3.org/2000/svg" y="0px">
                                                <path  d="M33.004,15.414H17.59V0h-2.176v15.414H0v2.176h15.414v15.414h2.176V17.59h15.414V15.414z" style="fill:#fff;"></path>
                                              </svg>
                                            </span>

                                          </div>

                                        </div>
                                      </div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

＆＃13;

＆＃13;

.image_contain_div {
  height: 130px;
  padding: 5px;
  width: 180px;
  border: thin black solid;
  /* Firefox */
  display: -moz-box;
  -moz-box-orient: horizontal;
  -moz-box-pack: center;
  -moz-box-align: center;
  /* Safari and Chrome */
  display: -webkit-box;
  -webkit-box-orient: horizontal;
  -webkit-box-pack: center;
  -webkit-box-align: center;
  /* W3C */
  display: box;
  box-orient: horizontal;
  box-pack: center;
  box-align: center;
  /* IE10 -Doesn't work yet! */
  display: -ms-flexbox;
  -ms-flex-align: center;
  -ms-flex-pack: center;
  -ms-box-orient: horizontal;
}
.image_contain_div .image_div {
  background: #000;
  /* Firefox */
  display: -moz-box;
  -moz-box-orient: horizontal;
  -moz-box-pack: center;
  -moz-box-align: center;
  /* Safari and Chrome */
  display: -webkit-box;
  -webkit-box-orient: horizontal;
  -webkit-box-pack: center;
  -webkit-box-align: center;
  /* W3C */
  display: box;
  box-orient: horizontal;
  box-pack: center;
  box-align: center;
  /* IE10 -Doesn't work yet! */
  display: -ms-flexbox;
  -ms-flex-align: center;
  -ms-flex-pack: center;
  -ms-box-orient: horizontal;
  height: 100%;
  width: 100%;
  position: relative;
}
.image_contain_div .image_div .custom_website_default_image_div {
  /* Firefox */
  display: -moz-box;
  -moz-box-orient: horizontal;
  -moz-box-pack: center;
  -moz-box-align: center;
  /* Safari and Chrome */
  display: -webkit-box;
  -webkit-box-orient: horizontal;
  -webkit-box-pack: center;
  -webkit-box-align: center;
  /* W3C */
  display: box;
  box-orient: horizontal;
  box-pack: center;
  box-align: center;
  /* IE10 -Doesn't work yet! */
  display: -ms-flexbox;
  -ms-flex-align: center;
  -ms-flex-pack: center;
  -ms-box-orient: horizontal;
}
.image_contain_div .image_div .custom_website_default_image_div svg {
  width: 100%;
  height: 100%;
}
.image_contain_div .image_div img {
  width: 100%;
  height: 100%;
}
.image_contain_div .image_div .custom_website_image_overlay_div {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: none;
}
.image_contain_div .image_div .custom_website_image_overlay_div svg {
  width: 30px;
  height: 30px;
}
.image_contain_div .image_div:hover .custom_website_image_overlay_div {
  /* Firefox */
  display: -moz-box;
  -moz-box-orient: horizontal;
  -moz-box-pack: center;
  -moz-box-align: center;
  /* Safari and Chrome */
  display: -webkit-box;
  -webkit-box-orient: horizontal;
  -webkit-box-pack: center;
  -webkit-box-align: center;
  /* W3C */
  display: box;
  box-orient: horizontal;
  box-pack: center;
  box-align: center;
  /* IE10 -Doesn't work yet! */
  display: -ms-flexbox;
  -ms-flex-align: center;
  -ms-flex-pack: center;
  -ms-box-orient: horizontal;
}

＆＃13;

<div class="image_contain_div b">
                                        <div class="image_div ">


                                          <img src="https://d28hsb6vkzynsw.cloudfront.net/banner/2877/500/99041_banner_testfile.jpeg" alt="">

                                          <div class="custom_website_image_overlay_div">
                                            <span class="cursor_pointer">
                                              <svg  class="v-middle" style="enable-background:new 0 0 33.004 33.004;" viewBox="0 0 33.004 33.004"  x="0px" xmlns="http://www.w3.org/2000/svg" y="0px">
                                                <path  d="M33.004,15.414H17.59V0h-2.176v15.414H0v2.176h15.414v15.414h2.176V17.59h15.414V15.414z" style="fill:#fff;"></path>
                                              </svg>
                                            </span>

                                          </div>

                                        </div>
                                      </div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

有很多方法可以做到：通过用css替换img标签，这是另一个解决方案：

<style> .image_contain_div {
  height: 130px;
  padding: 5px;
  width: 180px;
  background-size:180px 130px;
  border: thin black solid;
  /* Firefox */
  display: -moz-box;
  -moz-box-orient: horizontal;
  -moz-box-pack: center;
  -moz-box-align: center;
  /* Safari and Chrome */
  display: -webkit-box;
  -webkit-box-orient: horizontal;
  -webkit-box-pack: center;
  -webkit-box-align: center;
  /* W3C */
  display: box;
  box-orient: horizontal;
  box-pack: center;
  box-align: center;
  /* IE10 -Doesn't work yet! */
  display: -ms-flexbox;
  -ms-flex-align: center;
  -ms-flex-pack: center;
  -ms-box-orient: horizontal;
}
.image_contain_div .image_div {
  background: #000;
  /* Firefox */
  display: -moz-box;
  -moz-box-orient: horizontal;
  -moz-box-pack: center;
  -moz-box-align: center;
  /* Safari and Chrome */
  display: -webkit-box;
  -webkit-box-orient: horizontal;
  -webkit-box-pack: center;
  -webkit-box-align: center;
  /* W3C */
  display: box;
  box-orient: horizontal;
  box-pack: center;
  box-align: center;
  /* IE10 -Doesn't work yet! */
  display: -ms-flexbox;
  -ms-flex-align: center;
  -ms-flex-pack: center;
  -ms-box-orient: horizontal;
  height: 100%;
  width: 100%;
  position: relative;
  background:url(https://d28hsb6vkzynsw.cloudfront.net/banner/2877/500/99041_banner_testfile.jpeg);
  background-size:180px 130px;
}
.image_contain_div .image_div .custom_website_default_image_div {
  /* Firefox */
  display: -moz-box;
  -moz-box-orient: horizontal;
  -moz-box-pack: center;
  -moz-box-align: center;
  /* Safari and Chrome */
  display: -webkit-box;
  -webkit-box-orient: horizontal;
  -webkit-box-pack: center;
  -webkit-box-align: center;
  /* W3C */
  display: box;
  box-orient: horizontal;
  box-pack: center;
  box-align: center;
  /* IE10 -Doesn't work yet! */
  display: -ms-flexbox;
  -ms-flex-align: center;
  -ms-flex-pack: center;
  -ms-box-orient: horizontal;
}
.image_contain_div .image_div .custom_website_default_image_div svg {
  width: 26px;
  height: 26px;
}
.image_contain_div .image_div img {
  max-width: 100%;
  max-height: 100%;
}
.image_contain_div .image_div .custom_website_image_overlay_div {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: none;
}
.image_contain_div .image_div .custom_website_image_overlay_div svg {
  width: 30px;
  height: 30px;
}
.image_contain_div .image_div:hover .custom_website_image_overlay_div {
  /* Firefox */
  display: -moz-box;
  -moz-box-orient: horizontal;
  -moz-box-pack: center;
  -moz-box-align: center;
  /* Safari and Chrome */
  display: -webkit-box;
  -webkit-box-orient: horizontal;
  -webkit-box-pack: center;
  -webkit-box-align: center;
  /* W3C */
  display: box;
  box-orient: horizontal;
  box-pack: center;
  box-align: center;
  /* IE10 -Doesn't work yet! */
  display: -ms-flexbox;
  -ms-flex-align: center;
  -ms-flex-pack: center;
  -ms-box-orient: horizontal;
}

</style>
<div class="image_contain_div b">
                                        <div class="image_div">


                                          <div class="custom_website_image_overlay_div">
                                            <span class="cursor_pointer">
                                              <svg  class="v-middle" style="enable-background:new 0 0 33.004 33.004;" viewBox="0 0 33.004 33.004"  x="0px" xmlns="http://www.w3.org/2000/svg" y="0px">
                                                <path  d="M33.004,15.414H17.59V0h-2.176v15.414H0v2.176h15.414v15.414h2.176V17.59h15.414V15.414z" style="fill:#fff;"></path>
                                              </svg>
                                            </span>

                                          </div>

                                        </div>
                                      </div>

Answer 5

＆＃13;

＆＃13;

.image_contain_div {
  height: 130px;
  padding: 5px;
  width: 180px;
  border: thin black solid;
  /* Firefox */
  display: -moz-box;
  -moz-box-orient: horizontal;
  -moz-box-pack: center;
  -moz-box-align: center;
  /* Safari and Chrome */
  display: -webkit-box;
  -webkit-box-orient: horizontal;
  -webkit-box-pack: center;
  -webkit-box-align: center;
  /* W3C */
  display: box;
  box-orient: horizontal;
  box-pack: center;
  box-align: center;
  /* IE10 -Doesn't work yet! */
  display: -ms-flexbox;
  -ms-flex-align: center;
  -ms-flex-pack: center;
  -ms-box-orient: horizontal;
}
.image_contain_div .image_div {
  background: #000;
  /* Firefox */
  display: -moz-box;
  -moz-box-orient: horizontal;
  -moz-box-pack: center;
  -moz-box-align: center;
  /* Safari and Chrome */
  display: -webkit-box;
  -webkit-box-orient: horizontal;
  -webkit-box-pack: center;
  -webkit-box-align: center;
  /* W3C */
  display: box;
  box-orient: horizontal;
  box-pack: center;
  box-align: center;
  /* IE10 -Doesn't work yet! */
  display: -ms-flexbox;
  -ms-flex-align: center;
  -ms-flex-pack: center;
  -ms-box-orient: horizontal;
  height: 100%;
  width: 100%;
  position: relative;
}
.image_contain_div .image_div .custom_website_default_image_div {
  /* Firefox */
  display: -moz-box;
  -moz-box-orient: horizontal;
  -moz-box-pack: center;
  -moz-box-align: center;
  /* Safari and Chrome */
  display: -webkit-box;
  -webkit-box-orient: horizontal;
  -webkit-box-pack: center;
  -webkit-box-align: center;
  /* W3C */
  display: box;
  box-orient: horizontal;
  box-pack: center;
  box-align: center;
  /* IE10 -Doesn't work yet! */
  display: -ms-flexbox;
  -ms-flex-align: center;
  -ms-flex-pack: center;
  -ms-box-orient: horizontal;
}
.image_contain_div .image_div .custom_website_default_image_div svg {
  width: 26px;
  height: 26px;
}
.image_contain_div .image_div img {
  max-width: 100%;
  max-height: 100%;
  position: absolute;
  top: 0;
  z-index: 1;
  height: 100%;
  left: 0;
}
.image_contain_div .image_div .custom_website_image_overlay_div {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: none;
  z-index: 1;
}
.image_contain_div .image_div .custom_website_image_overlay_div svg {
  width: 30px;
  height: 30px;
}
.image_contain_div .image_div:hover .custom_website_image_overlay_div {
  /* Firefox */
  display: -moz-box;
  -moz-box-orient: horizontal;
  -moz-box-pack: center;
  -moz-box-align: center;
  /* Safari and Chrome */
  display: -webkit-box;
  -webkit-box-orient: horizontal;
  -webkit-box-pack: center;
  -webkit-box-align: center;
  /* W3C */
  display: box;
  box-orient: horizontal;
  box-pack: center;
  box-align: center;
  /* IE10 -Doesn't work yet! */
  display: -ms-flexbox;
  -ms-flex-align: center;
  -ms-flex-pack: center;
  -ms-box-orient: horizontal;
}

＆＃13;

<div class="image_contain_div b">
    <div class="image_div ">

        <img src="https://d28hsb6vkzynsw.cloudfront.net/banner/2877/500/99041_banner_testfile.jpeg" alt="">

        <div class="custom_website_image_overlay_div">
            <span class="cursor_pointer">
                <svg  class="v-middle" style="enable-background:new 0 0 33.004 33.004;" viewBox="0 0 33.004 33.004"  x="0px" xmlns="http://www.w3.org/2000/svg" y="0px">
                    <path  d="M33.004,15.414H17.59V0h-2.176v15.414H0v2.176h15.414v15.414h2.176V17.59h15.414V15.414z" style="fill:#fff;"></path>
                </svg>
            </span>
        </div>

    </div>
</div>

＆＃13;

＆＃13;

＆＃13;