Question

我有一个简单的html，表格中有2列。左列是图像，右列是文本。现在，如果宽度<1，则带有文本的列应该在图像下移动。这种转变效果很好，但我希望图像不要小，但要在手机上保持100％的宽度。我在css中添加了一个代码（img [class =“img-max”]），但它不起作用。任何人都可以帮助它运作吗？

这是代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>A Simple Responsive HTML Email</title>

  <style type="text/css">
  body {margin: 0; padding: 0; min-width: 100%!important;}
  img {height: auto;}
  .content {width: 100%; max-width: 600px;}
  .header {padding: 40px 30px 20px 30px;}
  .subhead {font-size: 15px; color: #ffffff; font-family: sans-serif; letter-spacing: 10px;}
  .h1, .h2, .bodycopy {color: #153643; font-family: sans-serif;}
  .h1 {font-size: 33px; line-height: 38px; font-weight: bold;}
  .h2 {padding: 0 0 15px 0; font-size: 24px; line-height: 28px; font-weight: bold;}
  .bodycopy {font-size: 16px; line-height: 22px;}
  .fix {display: block;}

  @media screen and (max-width: 550px) {        
  (img[class="img-max"]{
      max-width: 100% !important;
      height:auto !important;
      align: center !important;
      display:block !important;
   }
} 

 /*@media only screen and (min-device-width: 601px) {
   .content {width: 600px !important;}
   .col425 {width: 425px!important;}
   .col380 {width: 380px!important;}
  }*/

 </style>

</head>

<body yahoo bgcolor="#f6f8f1" style="margin: 0;padding: 0;min-width: 100%!important;">

<table width="100%" bgcolor="#f6f8f1" border="0" cellpadding="0" cellspacing="0">
<tr>
  <td>
    <!--[if (gte mso 9)|(IE)]>
      <table width="600" align="center" cellpadding="0" cellspacing="0" border="0">
        <tr>
          <td>
           <![endif]-->     

               <table bgcolor="#ffffff" class="content" align="center" cellpadding="0" cellspacing="0" border="1" style="width: 100%; max-width: 600px;">

                  <tr>
                     <td bgcolor="#c7d8a7" class="header" style="padding: 0px 0px 0px 0px;">

                        <table width="50%" align="left" border="1" cellpadding="0" cellspacing="0">  
                            <tr>
                                 <td width="100%" height="70" style="padding: 0px 0px 0px 0px;">
                                      <img class="img-max" src="http://www.deacademievoorinnovatieftrainen.nl/nieuwsbrieven/coach.jpg" border="1" alt="" width="95%" style="height: auto;">            
                                 </td>
                                 <td width="5" height="1" style="padding: 0px 0px 0px 0px;"><img src="http://www.deacademievoorinnovatieftrainen.nl/nieuwsbrieven/nic/dotwhite.jpg" width="5" border="1" style="height: auto;"></td>
                              </tr>
                           </table>
                        <!--[if (gte mso 9)|(IE)]>
                           <table width="425" align="left" cellpadding="0" cellspacing="0" border="0">
                              <tr>
                                  <td>
                            <![endif]-->
                                  <table class="col425" align="left" border="1" cellpadding="0" cellspacing="0" style="width: 100%; max-width: 270px;">  
                                     <tr>
                                         <td height="70">
                                             <table width="100%" border="1" cellspacing="0" cellpadding="0">
                                               <tr>
                                                   <td class="subhead" style="padding: 20px 20px 30px 25px;font-size: 15px;color: #ffffff;font-family: sans-serif;letter-spacing: 10px;">
                                                Header 1
                                                   </td>
                                               </tr>
                                               <tr>
                                                  <td class="h1" style="padding: 20px 20px 30px 25px; color: #153643;font-family: sans-serif;font-size: 18px;line-height: 18px;font-weight: bold;">
                                                   Header 2
                                                  </td>
                                               </tr>
                                               <tr>
                                                  <td style="padding: 20px 0px 30px 25px;color: #153643;font-family: sans-serif;font-size: 12px;line-height: 14px;font-weight: 400;">
                                                     <div align="justify">This is main text. This is main text. This is main text. This is main text. This is main text. This is main text. </div>
                                                 </td>
                                               </tr>
                                          </table>
                                        </td>
                                    </tr>
                               </table>
                         <!--[if (gte mso 9)|(IE)]>
                      </td>
                   </tr>
                </table>
           <![endif]-->
         </td>
      </tr>

   </table>
         <!--[if (gte mso 9)|(IE)]>
       </td>
      </tr>
         </table>
     <![endif]-->
     </td>
   </tr>
</table>

</body>
</html>

有人可以帮助我如何在手机上100％获得这张图片吗？

Answer 1

@media screen and (max-width: 550px) {        
  img.img-max{
      max-width: 100% !important;
      height:auto !important;
      align: center !important;
      display:block !important;
   }
}

Answer 2

我不完全确定这是否是你想要的，但无论如何我都会尝试。

要使我自己的网站适合移动设备，我使用Bootstrap。

尝试将这两行代码添加到标题中：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">

<meta name="viewport" content="width=device-width, initial-scale=1">

您可以在Bootstrap CSS docs中了解相关信息。

希望我帮忙！：）

Answer 3

是的，这是我的jsfiddle：

[链接到jsfiddle：] [1]

 [1]: http://jsfiddle.net/Kippie32/2hqg7xzs/

如何在手机上使图像100％宽？

3 个答案: