Question

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

问题是所有的设计都是基于html的，所以你可以拥有不同尺寸的1到3行图像，而不需要使用任何CSS。所有设计都是基于HTML的。

逐个更改每个图像/表格将是几周无聊的工作，因为这个网站有很多页面（数百个，关于动物/植物）

我看过大多数描述这个css解决方案的主题： img {宽度：100％; height：auto; width：auto \ 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标签上添加容器单元格，请使用更好的选择器。

<强>使用Javascript：

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

<强> JSFiddle Example 2

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

2 个答案: