使用 95% 标签的图像无法正常工作答案

【问题标题】：image using 95% tag not working properly使用 95% 标签的图像无法正常工作
【发布时间】：2013-08-04 19:25:41
【问题描述】：

我正在创建我的网站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>

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

【问题讨论】：

在 DESKTOP FireFox 上没有问题。 ;) 我错过了mobile 部分！
嗨。惊人的梦想。你在看哪里？
@KevHopwood 你用的是什么浏览器？什么操作系统？
它在每个浏览器 firefox PC、chrome、IOS Safari 和 android chrome 上执行。希望页面工作正常。但单击我的标签之一。（例如免费）
@KevHopwood 您的初始徽标大小是 1,000px × 400px (scaled to 743px × 297px) - 我建议将其用于您的所有 CSS 类 (.logo) width:100%; max-width:743px; max-height:297px; - 我使用一些东西来产生影响并且效果很好。

标签： php mysql image content-management-system image-scaling

【解决方案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">

这是我在客户网站上使用的另一种方法，使用 1800 像素宽的图像，可以很好地呈现大小 iPhone 屏幕，并且会自动调整到屏幕宽度，而无需担心高度属性。

【讨论】：

嗨，弗雷德。我正确地说此代码<img style="-ms-interpolation-mode: bicubic; width:70%;" border="0" src="http://www.xclo.co.uk/logomobi.png" onclick="history.go(-1);" alt="LOGO" align="middle" /> 不需要css？
@KevHopwood 你好，Kev。我不是 100% 确定 onclick="history.go(-1);" 可能属于您的 href 而不是 img。如果 70% 和 onclick="history.go(-1);" 适合您，请尝试一下，但这是一般的想法。
@KevHopwood 太好了，我很高兴它对你有用。如果您认为我的回答对您有帮助，请点击我的回答左侧的复选标记接受它，这样您的问题现在将被标记为已解决，干杯:)
我尝试了 100%，但它看起来太大了，所以我在我的电脑、galaxy s3、ipad 和 ipod touch 上玩了 70%。因为它们是常见的设备，我相信它是安全的（不知道可怕的黑莓手机）。在一些项目中，on click 对我来说效果很好。再次。如果不需要，我可以删除 .logo 的 css 吗？
也。当您的其他代码在 Firefox 的响应式设计视图中达到 300 像素左右时，您的其他代码会颤抖，但 img 样式不会。

【解决方案2】：

您必须删除宽度规则或高度规则以保持图像比例。你希望它是高度的 10% 还是宽度的 75%？

同时删除

width="100%"

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

【讨论】：

嗨。你能解释一下你的意思吗？
我的列表和标题页上唯一的 width="100" 是正文宽度。它们现在都已被删除，但仍然无法正常工作。
嗨。上面的弗雷德帖子使它看起来更正常。谢谢。
我现在看到您已经在 body 元素中包含了 html-head 代码。那应该被移动。