更改表格大小，使图片拉伸/适合它们

Question

我试图让桌子变得更小，并且还可以将图片拉伸/适合放入桌子中。不知道如何开始。

我该怎么做CSS？ 任何帮助都感激不尽 ！

<table id="member" >
    <tr>

            <td><img src="1.jpg" ></td>
            <td><img src="2.jpg"></td>
            <td><img src="3.jpg"></td>
            <td><img src="4.jpg"></td>
            <td><img src="5.jpg"></td>
            <td><img src="6.jpg"></td>




    </tr>
    </table>

Answer 1

没有必要在此处涉及表格，似乎：）

Have a fiddle!

HTML

<div id="images">
    <img src="http://www.placehold.it/200" />
    <img src="http://www.placehold.it/200" />
    <img src="http://www.placehold.it/200" />
    <img src="http://www.placehold.it/200" />
    <img src="http://www.placehold.it/200" />
    <img src="http://www.placehold.it/200" />
</div>

CSS

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
#images {
    width: 100%;
    max-width: 500px;
    margin: 0 auto; /* Center images */
}
img {
    float: left;
    width: 50%;
    padding: 10px;
}

根据要并排显示的图像数量更改图像宽度百分比。 33％会给你3分。将#images max-width更改为您想要的最大宽度。

您可能还需要min-width上的#images。

More on box-sizing

Answer 2

为了控制表格大小，您可以使用宽度和高度定义，如下所示：

member{
   width: 200px;
   height: 200px;
   }

什么时候你可以明显地交换＆＃39; px＆＃39;与＆＃39; em / vh / vw＆＃39; ...取决于您的工作方式。

现在，为了使图像伸展你需要做的是：

member td{
   background: url(yourImage.jpg) no-repeat;
   }

请注意，在此示例中，＆＃39; td＆＃39;指的是所有的＆＃39; s＆＃39;在你的桌子上。选择一个特定的单元格，这是我确定你搜索的另一个问题，你可以找到答案。