image using 95% tag not working properly

StackOverflow https://stackoverflow.com/questions/18035281

Pregunta

I'm creating my website found here, I added my logo at the top of the page. As this site is a mobile-optimized site, I wanted to add the logo so it correctly scales to the appropriate viewport (device screen size).

I have accomplished this by using this code in my CSS file:

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

My logo is stored in header.php, and is included on all of the respective pages. However, the logo looks good on the homepage, but when clicking one of the navigational tabs to bring up the list.php page, it doesn't look scaled correctly.

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>

The CSS is:

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>

Could someone please guide me in the correct direction? Thank you.

¿Fue útil?

Solución

There are a few methods you can try.

Your initial logo size is 1,000px × 400px (scaled to 743px × 297px)

I suggest to use this for ALL your CSS classes (.logo) 

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

I use something to that affect and it works beautifully.

You could also try:

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

Which is another method I used for a client's website and using a 1800px wide image which renders nicely for large as well as small iPhone screens and will automatically adjust to screen width, without worrying about height attribute.

Otros consejos

You have to remove either the width rule or the height rule to keep the image proportions. Do you want it to be 10% of the height or 75% of the width?

Also remove the

width="100%"

from inline html. Keep all style rules in external css.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top