How to scale down the pictures in a td or table (css problem) automatically scale the pictures_html/css_WEB-ITnose

There is a lot of talk on the Internet about setting the width of p

and killing people. Why do we need to automatically scale? Isn’t it because the mobile phone screen has too much resolution? How can you scale it if you specify the width? Your sister.

After many experiments, I found a better method, which can be perfectly displayed on both ios WeChat/browser and android WeChat/browser, that is:

1. p is not As required, just center the content

2. Put a table in it, the width of the table = 100%, this is the most critical

3. Put an img in td, the max of img -width:100%;

That’s OK!

Attach a style sheet:

table {
 width: 100%;
 margin:0 auto;
 background: #2d2d2d; /* browsers that don't support rgba  */
 background: rgba(45,45,45,.15);
 font-family: 'PT Sans', Helvetica, Arial, sans-serif;
 font-size: 20px;
 /*color: #0; 不能用1个0 */
 border: none;
 border-collapse: collapse;
 text-shadow: 0 1px 2px rgba(0,0,0,.3);
 
 
 }
 td{
 /* max-width:100%; Mozilla才支持一个max-width 的CSS语法 */
 background: #ffffff;
 border: none; /*solid #000 1px;*/
 vertical-align:center;
 text-align:center;
 color: #000;
 }
 
 
 /* 分享页面图片自动缩放设备屏幕宽度 */
 img.sharepage{
 max-width:100%;
 }