Question

我创建了网站，它是无响应的网站。我想将我的网站更改为完全响应的网站。

enter image description here

当我调整浏览器大小以检查响应时，它显示为

enter image description here

没有显示顶部图片？如何将图像更改为响应？

<?php
session_start();
require_once("conf.php");

$section = $_REQUEST['section'];
$logout = $_REQUEST['logout'];
 $buttombanner="<img src=\"images/buttombanner.gif\" />";
?>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">
<title>LMS</title>

<link rel="stylesheet" href="style/style.css" type="text/css"/>
<link rel="stylesheet" href="style1.css" type="text/css" /> 
<style type="text/css">

  @media only screen  and (max-width : 780px)
       {
           .leftborder
           {
               background-color:skyblue;
           }

         .rightborder { 
          border-right: 1px solid #000000; 
                 } 

   .leftborder { 
        border-left: 1px solid #000000; 
        border-right: 1px solid #000000; 
       border-bottom: 1px solid #000000; 

      border-style: thin; 
       width:800px;
       height:600px;



              } 


.style2 {font-size: xx-small}

.descriptor_row
{
   background:#003366;
   font-size:x-small;
   color:#FFFFFF;
   border:#FFFFFF;
} 


BODY { font-family: Arial, Helvetica, sans-serif;
       line-height:160%;
       font-size:14px;
       color:#000;
       background: url(images/gradient2.jpg);
       background-repeat: repeat-x; 
      background-color:#FFF; 
}       


table[class="leftborder"] {
        width: 100% !important;


                       }            
       }






.rightborder { 
border-right: 1px solid #000000; 
} 

.leftborder { 
border-left: 1px solid #000000; 
border-right: 1px solid #000000; 
border-bottom: 1px solid #000000; 
width:800px;
height:600px;

border-style: thin; 
} 


.style2 {font-size: xx-small}

.descriptor_row
{
background:#003366;
font-size:x-small;
color:#FFFFFF;
border:#FFFFFF;
} 


BODY { font-family: Arial, Helvetica, sans-serif;
    line-height:160%;
    font-size:14px;
    color:#000;
    background: url(images/gradient2.jpg);
    background-repeat: repeat-x; 
    background-color:#FFF; 
}       



</style>
<script type="text/javascript">
function openWindow(winName)
{
    window.open(winName,"FAQs", "width=950,height=650,resizable=no,scrollbars=no,toolbar=no,status=no,menubar=no,copyhistory=no,left=100,top=100,screenX=100,location=no,screenY=100");
}
</script>
</head>

<link href="style.css" rel="stylesheet" type="text/css">

<body bgcolor="#FFFFFF" TOPMARGIN="0" LEFTMARGIN="0" RIGHTMARGIN="0">

<table  width="100%" border="0" cellspacing="0" cellpadding="0" >
   <tr>
       <td align="center">
         <table   border="0" cellspacing="0" cellpadding="0" class="leftborder"/>
              <tr bgcolor="#FFFFFF">
            <!--- image code--->  
          <td colspan="2"  style="background-image:url('site_conf/images/det_banner.jpg'); background-repeat:no-repeat; background-position:center;" width="100%" height="100" align="right">

              <?php
              if(!is_null($sid)&&$session_error=="none")
              {
                    $_SESSION['lms_username']=$lms_username;
                    ?>
                    <TABLE BORDER="0" CELLPADDING="2" CELLSPACING="0" WIDTH="190" >
                    <TR>
                        <TD><FONT FACE="VERDANA" SIZE="1" COLOR="#000000">Logged in as: <B><?php echo $lms_username; ?></B></TD>
                    </TR>
                        <?php
                        if($lms_groups=="on" && $lms_user_group!=""){
                        ?>
                        <TR>
                            <TD><FONT FACE="VERDANA" SIZE="1" COLOR="#000000"><?php echo"$lms_gtitle: "; if($lms_groups=="on"){echo"<B>$lms_user_group</B>";}?></TD>        
                        </TR>   
                        <TR>
                            <TD><FONT FACE="VERDANA" SIZE="1" COLOR="#000000"><?php echo "$lms_sgtitle: "; if($lms_groups=="on"){echo"<B>$lms_user_subgroup</B>";}?></TD>

                        </TR>   
                        <tr>
                            <TD><FONT FACE="VERDANA" SIZE="1" COLOR="#000000"><?php if($section=="reports" && $report){echo"<A HREF='index.php?section=reports&sid=$sid'>Back to Detailed Reports Section";}?></FONT></TD>
                        </tr>
                        <?php }?>

                    </TABLE>
                    <?php   
               }
              ?></td>
              </tr>
              <tr>
                  <td colspan="2" height="20" background="images/bg.gif">
                      <table width="100%"  border="0" cellspacing="0" cellpadding="0">
                         <tr>
                            <td>&nbsp;</td>
                            <TD align="right"><?php
                if(!is_null($sid)&&$session_error=="none")
                {
                ?><a style=""  href="index.php?section=<?php echo $section; ?>&logout=YES&sid=<?php echo $sid; ?>"><img src="images/logout.gif" border="0" align="ABSMIDDLE" alt="Click here to Log Out"></a><?php
                }
                ?></TD>
                        </tr>
                    </table></td>
              </tr>
             <tr>
                <?php
                if(is_null($sid)||$session_error!="none")
                {
                    $nav_display = 'display: none';
                }
                ?>
                <td valign="top" style=" <?php echo $nav_display; ?> ">
                <!---------BEGIN SIDE NAV TABLE------------->
                <table width="198" border="0" cellspacing="0" cellpadding="0" >
                  <tr valign="top" bordercolor="#FFFFFF"> 
                     <td width="198" bordercolor="#FFFFFF"><?php          
                     if((!is_null($sid)&&$session_error=="none"))
                     {
                        include($dir_components."navbar2.php");

                     }
                     ?></td>
                </tr>
                <tr><td>&nbsp;</td></tr>
                <tr>
                <td></td>
            </tr>
      </table>
    </td>
    <td class="boxcontent" VALIGN="TOP" >
    <?php 

    include($mysection);
    ?></td>
  </tr>
</table>
</td>
</tr>
</table>
<hr width="200px;">
</body>
</html>

Answer 1

尝试在您的网站中使用bootstrap并 class =＆＃34; img-responsive ＆＃34;在您的图片标记

Answer 2

您在css中使用了背景属性，因此您应该使用CSS3 background-size属性。

http://www.w3schools.com/cssref/css3_pr_background-size.asp

尝试将 background-size：contains; 添加到td的样式属性中，看看是否有帮助。请注意，如果包含的td设置为固定高度，则可能会出现一些难看的死区。

更改图像响应？

2 个答案: