如何使网站（图像/表格）按比例调整大小以适合屏幕大小

Question

我的朋友有一个 html 网站，其中包含许多包含各种文本或图片的页面。她收到 google 警告，该网站无法在 ipads/smartphones 上看到，并希望所有网站按比例重新缩放，以便至少可以在 ipad 上看到。

问题是所有设计都是基于 html 的，因此您可以在第 1 到 3 行中放置不同尺寸的图像，而无需使用任何 css。所有设计均基于 html。

一个一个地更改每个 image/table 将是几个星期的无聊工作，因为这个站点有很多页面（数百个，大约 animals/plants）

我见过大多数描述此 css 解决方案的主题： img {宽度：100%；高度：自动；宽度：auto； /* ie8 */}

然而，这在这种情况下不起作用，因为有不同数量的图像彼此相邻。

有没有简单的方法来按比例调整所有网站的大小？

CSS，或Javascript，或Jquery？

非常感谢

Answer 1

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

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

你可以这样设置

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' />

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

Javascript:

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

JSFiddle Example 2

如何使网站（图像/表格）按比例调整大小以适合屏幕大小

How to make website (images/ tables) resize proportionnally to fit screen size

html

css

image

resize