php - 95% タグを使用した画像が正しく機能しない

Question

ここにある自分のウェブサイトを作成しています。ページの上部にロゴを追加しました。このサイトはモバイル向けに最適化されたサイトであるため、ロゴを追加して、適切なビューポート (デバイスの画面サイズ) に正しくスケーリングされるようにしました。

CSS ファイルで次のコードを使用して、これを実現しました。

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

私のロゴはに保存されheader.php、それぞれのページのすべてに含まれています。ただし、ロゴはホームページでは見栄えがしますが、ナビゲーションタブの 1 つをクリックして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>

誰かが私を正しい方向に導いてくれませんか? ありがとうございました。

php - 95% タグを使用した画像が正しく機能しない

2 に答える 2

Related

Reference