Question

我一直在寻找并相信它可以通过使用＆＃34; Skeleton CSS＆＃34;

来实现

这是一个简单的概念，但很难实现。我只需要一个包含多个图像的表（如下图所示），以更改为示例宽度，如果显示在较小的屏幕上，则为750px。

http://s11.postimg.org/6w5cb39ur/Screen_Shot_2015_01_28_at_21_54_28.png

此刻发生的事情是它保持固定。这是因为我刚刚从PSD切片并保存为网页。

我不介意缩小尺寸的图片仅适用于平板电脑（754px）和台式机（960px）。除此之外，它不必缩小尺寸，我只需要从一个宽度跳到另一个宽度。

目前的HTML是：

<table id="Table_01" width="960" height="500" border="0" cellpadding="0" cellspacing="0">
<tr>
    <td>
        <img src="images/home_maingrid_01.png" width="310" height="160" alt=""></td>
    <td rowspan="5">
        <img src="images/home_maingrid_02.png" width="15" height="500" alt=""></td>
    <td rowspan="3">

依旧......

我不是要求一个完整的答案，只是要指明的方向，所以我不要浪费时间。

它用于Magento主页，以便可以使用不同的功能。我有一个不同的移动商店视图，这就是为什么我需要担心的宽度只有960px和754px。

Answer 1

如果从img和table标签以及CSS集中删除宽度和高度

img {
width:100%;
}

然后将表格的宽度设置为您需要的宽度，但要使每个表格的PERCENTAGE;即：

table {
    width:960px;
    height:500px;
}
@media only screen and (max-width: 754px){
    table {
        width:500px;
        height:330px;
    }
}

^（将其设置为您需要的任何东西）^

这是你的意思吗？

在包含图像时，如何在CSS中使表响应？

1 个答案: