圖像更改爲響應式圖像？

如何將圖像更改爲完整的響應式圖像？我有以下圖像網站頁面的頂部？試圖改變響應式圖像？沒有任何想法嗎？圖像更改爲響應式圖像？

<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

圖像更改爲響應式圖像？

回答

相關問題