如何计算和调整图像大小?

时间:2017-05-22 19:31:35

标签: javascript css responsive-design

如何将这个空白空间用于图像(调整图像宽度)?

INSERT INTO mytable (col1, col2)
VALUES (c1a, c2a)
     ,(C1b, c2b)
     ,(C1c, c2c)
     ...

请检查此jsfiddle

enter image description here

1 个答案:

答案 0 :(得分:0)

查看此DEMO

指定宽度以使用calc

上的li属性

CSS:

ul {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

li {
    display: inline-block;
    width: calc(100% / 3 - 3px); /* Added this (Keep in mind I subtracted 3px since you have a margin-left of 3px) */
    /* min-width taken out */
    height: 174px;
    box-shadow: none;
    box-sizing: border-box;
    background: none;
    padding: 4px 0 0 4px;
    margin: 0 0 0 3px;
    padding: 0px;
    float: left;
}

li div {
    background-image:url(http://i.stack.imgur.com/WCveg.jpg);
    float: left;
    width: 100%;
    height: 170px;
    box-sizing: border-box;
    margin: 0;
    border-radius: 4px;
    background-color: #105b63;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: relative;
}

HTML:

<ul>
  <li>
    <div></div>
  </li>
  <li>
    <div></div>
  </li>
  <li>
    <div></div>
  </li>
  <li>
    <div></div>
  </li>
  <li>
    <div></div>
  </li>
  <li>
    <div></div>
  </li>
  <li>
    <div></div>
  </li>
  <li>
    <div></div>
  </li>
  <li>
    <div></div>
  </li>
  <li>
    <div></div>
  </li>
</ul>