Question

我正在尝试使此着陆页响应：http://www.homeimprovementquotes.co.uk/2016newsletters/Company/landingpages/blackfriday-BIG.html

但是在移动设备上，当它处于纵向状态时，图像现在远远超出了屏幕的宽度，这意味着您必须滚动才能查看图像和表格。我通常只对电子邮件进行编码，此时我几乎都在扯掉我的头发。任何帮助将不胜感激。

  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="HandheldFriendly" content="true">


<style type="text/css">
body          { font-family: Helvetica,Arial,sans-serif }
div           { border: none }
#outer        { width: 100% }
#splashdiv    { float: left }
#formdiv      { float: left; height: 600px; background-color: #000000 }
#pelogo       { padding-bottom: 1em }
.blackbg      { background-color: #000000; text-align: center }
.centre       { text-align: center }
#theform      { display: inline-block; border: 2x solid #ff0000; padding: 1em auto 0px auto;
            background-color: #ffffff; opacity: 1;
            text-align: center }
#thetable     { margin-top: 1.5em }
.prompt       { text-align: right; padding: .4em .25em .4em 1em }
.response     { text-align: left; padding: .4em 1em .4em .25em }
.gobutton     { text-align: center; padding-top: 1em; padding-bottom: 1em }
.redsubmit    { border: 1px solid #ff0080; border-radius: 8px; background-color: #ff0000;
            padding: 2px .5em; color: #ffffff; font-weight: bold; font-size: 200% }

@media only screen and (max-width: 600px) {

img#beast {width: 100%; margin: 0; padding; 0;}}

以下是其他位

<body>
<div id="outer">
<div id="splashdiv">
  <img src="http://www.homeimprovementquotes.co.uk/2016newsletters/Company/landingpages/peep.png" width="690px" id="beast"/>
</div>
<div id="formdiv">
  <div class="blackbg">
    <div id="pelogo">
     <img src="http://www.homeimprovementquotes.co.uk/2016newsletters/Company/landingpages/pebf_sq1.png" width="690px" id="beast"/>
    </div>
    <div>
      <form id="theform" action="http://priceengines.co.uk/cgi-bin/signup" method="post" onsubmit="return check_form()">
        <table id="thetable" border="0">
          <tr>
            <th class="prompt">Contact Name</th>
            <td class="response"><input type="text" name="name" id="name" size="20" placeholder="Contact Name" /></td>
          </tr>
          <tr>
            <th class="prompt">Company Name</th>
            <td class="response"><input type="text" name="compname" id="compname" size="20" placeholder="Company Name" /></td>
          </tr>
          <tr>
            <th class="prompt">Contact Number</th>
            <td class="response"><input type="tel" name="tel" id="tel" size="20" placeholder="Contact Number" /></td>
          </tr>
          <tr>
            <th class="prompt">E-Mail Address</th>
            <td class="response"><input type="email" name="email" id="email" size="20" placeholder="E-mail" /></td>
          </tr>
          <tr>
            <td colspan="2" class="gobutton"><input class="redsubmit" type="submit" name="go" value="Get FREE leads!" /></td>
          </tr>
        </table>
      </form>
    </div>
  </div>
</div>
</div>
</body>

Answer 1

主题电子邮件总是令人痛苦。

但您可以尝试将max-width添加到您的电子邮件容器中。我通常将我的设置为600px。

还尝试使用断点使其响应。你可以给img一个max-width:100%或你喜欢的任何值。

Answer 2

将max-width: 100%添加到img

移动设备上的响应式图片规模太大

2 个答案: