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

问题

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.

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)

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, or Javascript, or Jquery ?

Many thanks

回答1:

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 Example

EDIT:

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

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:

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

JSFiddle Example 2

回答2:

I would recommend using Bootstrap , but you said you have already started.

One thing you can do is css min-width trick

You can set like this

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

来源：https://stackoverflow.com/questions/29334823/how-to-make-website-images-tables-resize-proportionnally-to-fit-screen-size

标签

html

css

image

resize