代码之家 › 专栏 › 技术社区 › jcjr Thunder-KC Inc

图像预览在一行-在中心和比例

css html

jcjr Thunder-KC Inc · 技术社区 · 4 年前

我想有纯html+css解决方案。如果没有其他解决方案,我可以想象用javascript来处理它。

备注:B中的图片应该进行修剪而不是调整大小。在真正的解决方案中,将有div与显示:表和所以,不是html表。

/*same*/
#container {
  width: 600px;
  border: 1px solid blue;
  margin: 0 auto;
  overflow: hidden;
}

img {
  width: 120px;
  height: 90px;
  background-color: red;
}

/*different*/
table {
  margin: 0 auto;
}

td {
  padding: 5px;
}

<div id="container">
  A (OK):
  <table>
    <tr>
      <td><img src="" /></td>
      <td><img src="" /></td>
      <td><img src="" /></td>
      <tr>
  </table>
  B (not OK - overflowing):
  <table>
    <tr>
      <td><img src="" /></td>
      <td><img src="" /></td>
      <td><img src="" /></td>
      <td><img src="" /></td>
      <td><img src="" /></td>
      <td><img src="" /></td>
      <td><img src="" /></td>
      <tr>
  </table>
</div>

/*same*/
#container {
  width: 600px;
  border: 1px solid blue;
  margin: 0 auto;
  overflow: hidden;
}

img {
  width: 120px;
  height: 90px;
  background-color: red;
}

/*different*/
table {
  margin: 0 auto;
  width: 100% !important;
  table-layout:fixed;
}

td {
  padding: 5px;
  overflow: hidden;
}

<div id="container">
  A (not OK - using whole width, spaces too big):
  <table>
    <tr>
      <td><img src="" /></td>
      <td><img src="" /></td>
      <td><img src="" /></td>
      <tr>
  </table>
  B (OK):
  <table>
    <tr>
      <td><img src="" /></td>
      <td><img src="" /></td>
      <td><img src="" /></td>
      <td><img src="" /></td>
      <td><img src="" /></td>
      <td><img src="" /></td>
      <td><img src="" /></td>
      <tr>
  </table>
</div>

2 回复 | 直到 4 年前

Temani Afif 4 年前

这是一个微不足道的flexbox作业:

/*same*/
#container {
  width: 600px;
  border: 1px solid blue;
  margin: 0 auto;
  overflow: hidden;
}

img {
  width: 120px;
  height: 90px;
  background-color: red;
}

/*different*/
section {
  display:flex;
  justify-content:center;
}

section div{
  padding: 5px;
  overflow: hidden;
}

<div id="container">
  A (OK):
  <section>
      <div><img src="" /></div>
      <div><img src="" /></div>
      <div><img src="" /></div>
  </section>
  B (OK):
  <section>
      <div><img src="" /></div>
      <div><img src="" /></div>
      <div><img src="" /></div>
      <div><img src="" /></div>
      <div><img src="" /></div>
      <div><img src="" /></div>
      <div><img src="" /></div>
  </section>
</div>