CSS:获取占位符图像可以获得DIV的整个大小而不会失真

时间:2016-07-14 10:15:47

标签: css

我想将png作为背景图像放置为充当占位符的div: https://jsbin.com/hohegiyazu/edit?html,css,output

代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style type="text/css" rel="stylesheet">

            .container {
                display: flex;
                flex-direction: column;
            }

            .row {
                display: flex;
                flex-direction: row;
            }

            .placeholder {
                background-image:url(/images/placeholder.png);
                background-size:100% 100%;
                height:50px;
                flex:1;
            }

        </style>
    </head>
    <body>
    <div class="container">

        <div class="row">
            <div class="placeholder"></div>
            <div class="placeholder"></div>
        </div>
        <div class="row">
            <div class="placeholder"></div>
            <div class="placeholder"></div>
            <div class="placeholder"></div>
            <div class="placeholder"></div>
        </div>

        <div class="row">
            <div class="placeholder"></div>
            <div class="placeholder"></div>
            <div class="placeholder"></div>
            <div class="placeholder"></div>
            <div class="placeholder"></div>
        </div>
        <div class="row">
            <div class="placeholder"></div>
        </div>
    </div>
    </body>
    </html>

我得到这个效果: svg example

图像根据元素的宽度而扭曲,左右边距不相等。

我想达到这个效果: enter image description here

有可能吗?

2 个答案:

答案 0 :(得分:2)

一种方法是将background-size属性更改为cover

.item {
   background-size: cover;
}

它将确保图像覆盖整个背景,没有拉伸,但这仍然很大程度上取决于图像实际上看起来像以及如何设置使用它的元素。< / p>

问题编辑后更新

通过定位,即center center,您可以控制图像的哪个部分更有价值,并使其居中或左对齐或...

.container {
  display: flex;
  flex-direction: column;  
}
.row {
  display: flex;
  flex-direction: row;
}
.placeholder {
  background: url(http://placehold.it/300) center center;
  background-size: cover;
  height:50px;
  flex:1;
  margin: 1px;
}
<div class="container">

  <div class="row">
    <div class="placeholder"></div>
    <div class="placeholder"></div>
  </div>
  <div class="row">
    <div class="placeholder"></div>
    <div class="placeholder"></div>
    <div class="placeholder"></div>
    <div class="placeholder"></div>
  </div>

  <div class="row">
    <div class="placeholder"></div>
    <div class="placeholder"></div>
    <div class="placeholder"></div>
    <div class="placeholder"></div>
    <div class="placeholder"></div>
  </div>
  <div class="row">
    <div class="placeholder"></div>
  </div>
</div>

在2:nd问题编辑后更新

您可以使用伪元素,无额外标记,背景颜色和圆角。这将为您节省额外的http请求,加快页面加载速度(这是真正推荐的),您可以轻松更改颜色和边框。

如果你真的需要一个

,你可以使用图像

.container {
  display: flex;
  flex-direction: column;  
}
.row {
  display: flex;
  flex-direction: row;
}
.placeholder {
  position: relative;
  height:50px;
  flex:1;
  margin: 1px;
  padding: 5px;
  color: red;
}
.placeholder::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 14px;
  z-index: -1;
  background: lightgray;
  /* with image
  background: url(http://placehold.it/300) center center / cover;
  */
}
<div class="container">

  <div class="row">
    <div class="placeholder">Hey, there</div>
    <div class="placeholder"></div>
  </div>
  <div class="row">
    <div class="placeholder"></div>
    <div class="placeholder"></div>
    <div class="placeholder"></div>
    <div class="placeholder"></div>
  </div>

  <div class="row">
    <div class="placeholder"></div>
    <div class="placeholder"></div>
    <div class="placeholder"></div>
    <div class="placeholder"></div>
    <div class="placeholder"></div>
  </div>
  <div class="row">
    <div class="placeholder"></div>
  </div>
</div>

答案 1 :(得分:1)

原因是您的PNG似乎包含白边。因此,当您水平拉伸时,边距也会按比例拉伸,因此会变大。

我认为您应该使用此处所述的border-image属性:https://css-tricks.com/understanding-border-image/

这样,您就可以定义图像的哪个部分可以拉伸,哪个部分保持相同的宽度/高度,从而可以保留角落和边距。