如何使网站（图像/表格）按比例调整大小以适应屏幕尺寸[关闭]

Question

我的朋友有一个 html 网站，其中包含许多包含各种文本或图片的页面。 她收到了一条谷歌警告，称在 ipad/智能手机上看不到该网站，并希望所有网站按比例重新缩放，以便至少可以在 ipad 上看到。

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

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

我见过大多数描述这个 CSS 解决方案的主题： img {宽度：100%;高度：自动；宽度：自动\9； /* ie8 */}

但是在这种情况下这不起作用，因为彼此旁边有不同数量的图像。

有没有一种简单的方法可以按比例调整所有网站的大小？

CSS、Javascript 还是 Jquery？

非常感谢

Answer 1

我会推荐使用 Bootstrap ，但你说你已经开始了。

你可以做的一件事是 css min-width 技巧

你可以这样设置

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

Answer 2

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

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 Example

编辑：

使用与上面相同的 css，但 html 是这样的：

HTML：

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

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

Javascript：

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

JSFiddle Example 2