Question

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

<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>

在这里更新我的完整代码我设置保持部分响应但我不能够该图像部分？请关注它..如何更改图像部分更改响应式设计？

Answer 1

background-size: cover;

Try this, it should do what you need.

Answer 2

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;
}

Answer 3

假设你有一个带有类的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。

Answer 4

CSS：

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

由于使用内联样式属性来设置背景图像，因此需要具有重要的＆＃34;在你的媒体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')");
    }
});

Answer 5

您可以使用以下CSS。只需将选择器更改为所需的内容即可。

.responsive {
  width: 100%;
  max-width: 400px;
  height: auto;
}

图像更改为响应图像？

5 个答案: