如何使网站（图片/表格）调整proportionnally以适应屏幕尺寸[关闭](How to ma

我的朋友有一个HTML网站，包含各种文字或图片的网页。 她收到了谷歌的警告，该网站无法在iPad上/智能手机中可以看出，并希望所有的网站按比例重新调整，因此它可以在iPad上至少可以看到。

问题是，所有的设计是基于HTML的，所以你可以在上线不同大小的1至3张图片，没有任何使用CSS的。 所有的设计是基于HTML的。

一个改变每个图像/表中的一个将是枯燥的工作周数，因为这网站有很多网页（数百，有关动物/植物）

/ * IE8 * /}

但是因为每个人的身边图像的各种数字，这并不在这种情况下工作。

有一种简单的方法来调整所有网站proportionnally？

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添加容器单元格。 但是，请使用一个更好的选择，如果你不希望在所有的img标签添加容器单元。

使用Javascript：

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

的jsfiddle实施例2

Answer 2:

我会建议使用引导程序，但你说你已经开始。

有一两件事你可以做的是CSS的最小宽度绝招

你可以这样设置

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

文章来源: How to make website (images/ tables) resize proportionnally to fit screen size [closed]