Question

我正在创建我的网站found here，我在页面顶部添加了我的徽标。由于此网站是针对移动设备优化的网站，因此我想添加徽标，以便正确缩放到相应的视口（设备屏幕大小）。

我已经通过在我的CSS文件中使用此代码来完成此操作：

.logo{
        width: 75%;
        height: 10%;
}

我的徽标存储在header.php中，并包含在所有相应的页面中。但是，徽标在主页上看起来不错，但是当点击其中一个导航标签以显示list.php页面时，它看起来不正确。

header.php ------------

<html>
<head>
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type" />
<meta content="minimum-scale=1.0, width=device-width, maximum-scale=0.6667, user-scalable=no" name="viewport" />
<link href="css/style.css" type="text/css" rel="stylesheet" />
<link type="text/css" rel="stylesheet" href="other.css" />

</head>
<body width="100%">


<p align="center"><img src="http://www.xclo.co.uk/logomobi.png" onclick="history.go(-1);" class="logo" border="0" width="100%" />


<div class="ribbon"><div class="ribbon-stitches-top"></div><strong class="ribbon-content"><h1><a href="index.php" style="color:#000000;">Home</a> - <a href="search.php" style="color:#000000;">Search</a> - More</h1></strong><div class="ribbon-stitches-bottom"></div></div></p>


<br /><br /><br /><br />

</p>


</body>
</html>

CSS是：

body{
   background-color:#dff7c8;
}

@font-face {
   font-family: 'CustomFont';
   src: url('fonts/fh_ink.eot'); /* For Internet Explorer 6+ */
}
@font-face {
   font-family: 'CustomFont';
   src: url('fonts/fh_ink.ttf'); /* For non-IE browsers */
}

a:link{
        color:black;
        text-decoration:none;
}

.border {
        width: 90%;
        height: auto;
        Margin-left:auto;
        Margin-right:auto;
        background-color:#c3f495;
        border: 5px ridge #009900;
        border-radius: 20px 50px 20px 20px;
        box-shadow: 10px 10px 10px rgba(0,0,0,0.55);

}

.title {
    font-family: 'CustomFont';
        text-align: center;
        font-size: 2.5em; 
        color:#000000;
        text-shadow: #999 2px 2px 4px;
}


.content {
        font-size: 15px;
        color:#000000;
}

.search {
        width: 24em;
        height:3em;
        border: 5px solid #009900;
        border-radius: 10px;
    position: relative;
        box-shadow: 2px 2px 2px 2px #A4A4A4;
        font-size: 20px; Position:relative;
}

/* (portrait) ----------- */
 @media screen and (orientation:portrait){


.logo{
        position:relative;
        width: 75%;
        height: 10%;
}

.go {
    position:relative;
    float: right;
    margin: 0px 0px 0px;
    border: 0px;
    background-color: transparent;
}


.inlay{
    position:absolute;
    top:-15px;
    left:-15px
}

.img {
    position:relative;
    width:201px;    
    height:81px;
    background-color: transparent;
}

.img2 {
    position:relative;
    border-radius:20%;
    width:201px;    
    height:81px;
    background-color: transparent;
}

.img3 {
    position:relative;
    width:150px;    
    height:81px;
    background-color: transparent;
}

.img4 {
    position:relative;
    width:201px;    
    height:150px;
    background-color: transparent;
}

.appimg {
    position:relative;
    width:20%;    
    height:20%;
    background-color: transparent;
}

.drapp {
    position:relative;
    width:35%;    
    height:15%;
    background-color: transparent;
}

.appstoreimg {
    position:relative;
    width:110px;    
    height:40px;
    background-color: transparent;
}


.divider {
    border-top: 3px dashed #009933;

}

li.android, 
li.iphone, 
li.ipad{
  display:none;
}

body.android .android,
body.iphone .iphone,
body.ipad .ipad{
  display:block;
}

}



/*(landscape) ----------- */
 @media screen and (orientation:landscape){

.go {
    position:relative;
    float: right;
    height:90px;
    width:90px;
    margin: 0px 0px 0px;
    border: 0px;
    background-color: transparent;
}


.inlay{
    position:absolute;
    top:-15px;
    left:-15px
}


.img {
    position:relative;
    width:211px;    
    height:81px;
    background-color: transparent;
}

.img2 {
    position:relative;
    width:211px;    
    height:81px;
    background-color: transparent;
}

.img3 {
    position:relative;
    width:150px;    
    height:81px;
    background-color: transparent;
}

.img4 {
    position:relative;
    width:211px;    
    height:160px;
    background-color: transparent;
}


.appimg {
    width:15%;    
    height:8%;
    background-color: transparent;
}

.drapp {
    position:relative;
    width:25%;    
    height:30%;
    background-color: transparent;
}

.appstoreimg {
    position:relative;
    width:220px;    
    height:80px;
    background-color: transparent;
}

.logo{
        position:relative;
        width: 75%;
        height: 10%;
}

.divider {
    border-top: 3px dashed #009933;

}

li.android, 
li.iphone, 
li.ipad{
  display:none;
}

body.android .android,
body.iphone .iphone,
body.ipad .ipad{
  display:block;
}

}

list.php ------------

<?php

include_once('include/connection.php');
include_once('include/article.php');

$article = new storearticle();

$articles = $article->fetch_all();

?>

<html>

<head>
<title>xclo mobi</title>
<link rel="stylesheet" href="other.css" />
</head>

<body width="100%">
<?php include_once('header.php'); ?>


<div class="container">
<h6><div align="center" class="title" style="color:#618050;"><b><u><?PHP echo "category = ", htmlspecialchars($_GET['id']); ?></b></u></h6></div>


    <?php foreach ($articles as $article) { 
    if ($article['promo_cat'] === $_GET['id']) { ?>


<div class="border">
<a href="single.php?id=<?php echo $article['promo_title']; ?>" style="text-decoration: none">
<img src="<?php echo $article['promo_image']; ?>" border="0" class="img" align="left"><br />


<a href="<?php echo $article['promo_link']; ?>" target="_blank"><img alt="" title="" src="GO.png" height="50" width="50" align="right" /></a>
<br /><br /><br /><br />
    <?PHP echo '<div class="title">' . $article['promo_title'] . '</div>'; ?>
<br />

<font class="content"><em><center><?php echo $article['promo_content']; ?></center></em></font>

</div><br/><br />

          </a>

 <?php } } ?>

</div>
<?php include_once('footer.php'); ?>
</body>

</html>

有人可以指导我正确的方向吗？谢谢。

Answer 1

您可以尝试一些方法。

您的初始徽标尺寸为1,000px × 400px (scaled to 743px × 297px)

我建议将这个用于所有CSS类（.logo）

width:100%; max-width:743px; max-height:297px;

我使用了一些有影响的东西，而且效果很好。

您也可以尝试：

<img style="-ms-interpolation-mode: bicubic; width:100%;" border=0 alt="LOGO" align=middle src="your_image.xxx">

这是我用于客户网站的另一种方法，使用1800px宽的图像，可以很好地呈现大屏幕和小屏幕，并且会自动调整屏幕宽度，而不必担心高度属性。

Answer 2

您必须删除宽度规则或高度规则才能保持图像比例。你想要它是高度的10％还是宽度的75％？

同时删除

width="100%"

来自内联html。将所有样式规则保留在外部CSS中。

图像使用95％标签无法正常工作

2 个答案: