如何使网站（图像/表）按比例调整大小以适应屏幕大小 [英] How to make website (images/ tables) resize proportionnally to fit screen size

问题描述

我的朋友有一个HTML网站，其中包含许多包含各种文字或图片的网页。
她收到一个谷歌警告，该网站不能在ipads /智能手机上看到，并希望所有的网站重新调整比例，所以它可以在ipad至少看到。

My friend has a html website with many pages containing various text or pictures. She received a google warning that the site can't be seen on ipads/smartphones and would like that all the site rescale proportionally so it can be seen on ipads at least.

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

The problem is all the design is html based, so you can have in on line 1 to 3 images of different sizes, without any use of css. All design is html based.

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

Changing each image/table one by one would be few weeks of boring work as this site has many pages (hundreds, about animals/plants)

我看过描述这个css解决方案的主题：
img {width：100％; height：auto; width：auto\9; / * ie8 * /}

I have seen most topic describing this css solution: img {width: 100%; height: auto;width: auto\9; /* ie8 */}

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

However this does not work in this case because there is various numbers of images beside each others.

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

Is there an easy way to resize all the site proportionnally?

CSS，或Javascript或Jquery？

CSS, or Javascript, or Jquery ?

非常感谢

推荐答案

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

This is one way to resize side by side content to fit the screen:

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示例

JSFiddle Example

编辑：

与上面的css相同，但html像这样：

With same css as above, but html like this:

HTML：

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

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

You can add container-cell div with javascript. But please use a better selector if you don't want to add container-cell on all img tags.

Javascript：

Javascript:

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

JSFiddle示例2

JSFiddle Example 2

这篇关于如何使网站（图像/表）按比例调整大小以适应屏幕大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！