如何使网站(图像/表格)按比例调整大小以适应屏幕大小

Question

我的朋友有一个html网站，有许多网页，包含各种文字或图片。她收到谷歌的警告，称ipads /智能手机上无法看到该网站，并希望所有网站按比例递增，这样至少可以在ipads上看到。

问题是所有的设计都是基于html的，所以您可以在第1行到第3行中获得不同大小的图像，而无需使用css。所有设计都是基于html的。

一个一个地改变每一张图片/表格将是几个星期的无聊工作，因为这个网站有很多页面(数百页，关于动植物)。

我看到了描述此css解决方案的大多数主题: img {宽度: 100%；高度:自动；宽度:auto9；/* ie8 */}

然而，在这种情况下，这是行不通的，因为彼此之间有不同数量的图像。

有一个简单的方法来调整所有网站的比例吗？

CSS，Javascript，还是Jquery？

非常感谢

Answer 1

这是一种并排调整内容大小以适应屏幕的方法：

HTML:

<div class="container">
    <div class="container-cell">
        <img src='http://tinyurl.com/pmaa4h2' />
    </div> 
    <div class="container-cell">
        <img src='http://tinyurl.com/pmaa4h2' />
    </div>
    <div class="container-cell">
        <img src='http://tinyurl.com/pmaa4h2' />
    </div> 
    <div class="container-cell">
        <img src='http://tinyurl.com/pmaa4h2' />
    </div> 
</div>

CSS:

.container-cell img { 
   width:100%;
}

.container-cell {
   display: table-cell;
   width: auto;
}

JSFiddle实例

编辑：

与上面的css相同，但html如下所示：

HTML:

<img src='http://tinyurl.com/pmaa4h2' />
<img src='http://tinyurl.com/pmaa4h2' />
<img src='http://tinyurl.com/pmaa4h2' />

您可以使用javascript添加容器-单元格div。但是，如果不想在所有img标记上添加容器单元格，请使用更好的选择器。

Javascript:

$("img").wrap("<div class='container-cell'></div>");

JSFiddle示例2

Answer 2

我建议你使用Bootstrap，但你说你已经开始了。

您可以做的一件事是css最小宽度技巧。

你可以这样设置

img { height : 100px }
media(min-width: 786px){
    img { height : 100px }
}