图像更改为响应式图像？

如何将图像更改为完整的响应式图像？我有以下图像网站页面的顶部？试图改变响应式图像？没有任何想法吗？图像更改为响应式图像？

<html> 
<head> 
<title>LearningFox</title> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="style/style.css" type="text/css" /> 
<link rel="stylesheet" href="style.css" type="text/css" /> 
<style type="text/css"> 

@media only screen and (max-width: 480px) { 
    table[class=container], 
    table[class=content], 
    table[class=wrap-table], 
    table[class=table], 
    table[class=id] 
    { 
     width: 100% !important; 
    } 

} 
</style> 
</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" class="container" > 
<tr> 
<td align="center"> 
<table width="800" height="600" border="0" cellspacing="0" cellpadding="0" class="content" > 

    <tr bgcolor="#366C88"> 
    <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" class="wrap-table" > 
    <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" bgcolor="" background="images/bg.gif"> 
    <table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0" class="table" > 
      <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.png" border="0" align="ABSMIDDLE" alt="Click here to Log Out"></a><?php 
    } 
    ?></TD> 
      </tr> 
     </table></td> 
    </tr> 
    <tr> 
    <td valign="top" width="198"> 
    <!---------BEGIN SIDE NAV TABLE-------------> 
    <table width="198" border="0" cellspacing="0" cellpadding="0" class="id" > 
     <tr valign="top"> 
      <td width="198"></td> 
     </tr> 
     <tr><td>&nbsp;</td></tr> 
     <tr> 
      <td></td> 
     </tr> 
     </table></td> 
    <!--<td class="boxcontent" VALIGN="TOP" width="602" style="border:1px solid red;">--> 
    <td class="boxcontent" VALIGN="TOP" > 
    <?php 
    include($mysection); 
    echo("$mysection"); 
    ?></td> 
    </tr> 
    <tr>

这里更新我的完整代码我设置保持部分响应，但我不能够该图像的一部分？请关于它的任何想法..如何改变图像部分改变响应式设计？

来源

2015-06-22 Thennarasu

这个问题，代码在其中，是一个完整的混乱。有人能够理解，更不用说回答这个问题了吗？ –

background-size: cover;

试试这个，它应该做你所需要的。

来源

2015-06-22 11:01:36

我需要更改Responsive图片 – Thennarasu

请尝试更好地解释。 –

我已经使用该图像我的页面顶部横幅其使用登录页面.i更改登录页面响应。但图像不响应=响应=？当我最小化浏览器登录页面其工作Responsive ..但不工作的图像？ – Thennarasu

html { 
    background: url(images/bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
}

来源

2015-06-22 11:06:41 Krone

不工作，先生。我可以在我的代码中使用类值吗？ – Thennarasu

只是使用.yourclass而不是html – Krone

k我会试试 – Thennarasu

假设你有一个div的类。

<div class="resp"></div>

使用CSS，你可以这样做：

.resp { 
     height: 500px; 
     width: 500px; 
     background: url(../img/waddup.png) center center no-repeat fixed; 
     background-size: cover; 
    }

Booyah。

来源

2015-06-22 11:32:58

CSS：

使用内嵌样式属性来设置背景图片的

td.banner{ 
    background-image:url('../site_conf/images/det_banner_new.jpg') !important; 
}

监守，它需要在你的媒体CSS“重要”。

JQuery的：

$(window).resize({ 
    if($(window).width()<768){ 
     $("td.banner").attr("backgroundImage","url('../site_conf/images/det_banner_new.jpg')"); 
    }else{ 
     $("td.banner").attr("backgroundImage","url('../site_conf/images/det_banner_old.jpg')"); 
    } 
});

来源

2015-06-22 15:32:43 Rajkishore

图像更改为响应式图像？

回答

相关问题