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

我有一个简单的html与表中的2列。左栏是图片，右栏是文字。现在，如果宽度为< 550，那么带有文本的列应该在图像下方移动。移动效果很好，但是我希望图像不要太小，但要在手机上达到100％的宽度。我在css中添加了一个代码（img [class =“img-max”]），但它不起作用。任何人都可以帮助它得到它的工作？如何使手机上的图像100％宽？

这是代码：

<!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％？

来源

2015-11-08 Jan van Beugen

请提供的jsfiddle或codepen –

我做了一个codepen。保存为zip。你想我发布的HTML和CSS？对不起，我是新手。 –

这是html： –

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

来源

2015-11-08 14:16:39

谢谢，但它不工作！我改变了代码，但是如果我把窗口变小，图像只有屏幕宽度的45％左右......... –

对不起，我做了，但没有帮助。图像仍然很小........ –

我不完全确定这是不是你想要的，但是我要试试它。

为了使我自己的网站移动友好，我使用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。

希望我帮了忙！ :)

来源

2015-11-08 14:17:38 ICTman1076

谢谢，我添加了2行，但它不工作........图像保持小如果窗口更小..... –

对不起我忍不住，@JanvanBeugen。你介意创建一个[jsfiddle]（http://jsfiddle.net），以便我们可以看到你的代码是如何工作的？谢谢！ – ICTman1076

对不起，我做了你所说的，但它没有帮助。图像保持小.... –

是的，这里是我的jsfiddle：

[链接到的jsfiddle：] [1]

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

来源

2015-11-08 17:27:35

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

回答

相关问题