www.webdeveloper.com
Results 1 to 8 of 8

Thread: Change image size

  1. #1
    Join Date
    Nov 2011
    Posts
    126

    Change image size

    I would like to know if there is a way to keep the image one size on the first page and make it smaller on all other pages.

    HTML Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    
    <meta charset="utf-8">
    
    <title>Charisma Communications - Home</title>
    
    <link rel="stylesheet" media="screen"  href="css/main.css">
    
    <meta name="description" content="Charisma Communications">
    <meta name="keywords" content="Motovational,Charisma,Toes,Louis Gaudry,Public Speaker">
    <meta name="author" content="Louis Gaudry">
    
    
    </head>
    <body>
    <div id="container">
    
     <h1 class="header">Charisma Communications</h1>
     <h3 class="header">"...Moving People Beyond Their Limitations..."</h3>
    
    <ul id="nav">
     <li><a href="index.html">Home</a></li>
     <li><a href="bio.html">Biography</a></li>
     <li><a href="presentations.html">Presentations</a></li>
     <li><a href="testimonials.html">Testimonials</a></li>
     <li><a href="videos.html">Videos/Pictures</a></li>
     <li><a href="events.html">Plan An Event</a></li>
     <li><a href="http://toesinmotion.wordpress.com/">My Blog</a></li>
     <li><a href="contact.html">Contact</a></li>
    </ul>
    
    <div id="preamble">
    <h3>Welcome</h3>
    <p class="p1">
    Louis Gaudry's goal is to illustrate to people that no matter what your 
    circumstances are in life, you can overcome your personal challenges. 
    He's a comedian, an educator, and storyteller. He will get you laughing, 
    thinking, and feeling good about yourself! 
    </p>
    <p class="p1">&nbsp;</p>
    <p class="p1">&nbsp;</p>
    <p class="p1">&nbsp;</p>
    <p class="p1">&nbsp;</p>
    <p class="p1">&nbsp;</p>
    <p class="p1">&nbsp;</p>
    <p class="p1">&nbsp;</p>
    <p class="p1">&nbsp;</p>
    <p class="p1">&nbsp;</p>
    
    <div id="footer">
    Copyright &copy; 2013 Charisma Communications		       
    <a href="http://www.cjwebconsulting.com/">Website Designed By CJ Web Consulting</a>
    </div> 
        
    </div><!-- end #container -->
    
    
    </div></td>
      </tr>
    </table>
    
    
    
    </body>
    </html>
    Code:
    body {
        margin:0 0 10px;
        background-color:#6b90bd;
     }
    #container {
        position:relative;
        width:900px;
        min-height:472px;
        padding:80px 0 48px;
    	margin:auto;
    	background-color:#6b90bd;
        background-image:url(../images/headAndShoulders.png);
        background-repeat:no-repeat;
       
     }
    .header {
        padding:0 0 0 334px;
        font-family:georgia,'times new roman',times,serif;
        font-style:italic;
        color:#333;
     }
    #nav {
        padding:0;
        margin:0 0 0 250px;
        list-style-type:none;
        overflow:hidden;
     }
    #nav li {
        float:left;
        margin:0 1px;
     }
    #nav a {
        display:block;
        line-height:22px;
        padding:0 4px;
        font-family:verdana,sans-serif;
        font-size:12px;
        background-color:#0b3c77;
        text-decoration:none; 
        color:#d8d7d2;
     }
    #nav a:hover {
        color:#9aa4bf;
     }
    #preamble {
        width:480px;
       
        margin:46px 0 0 334px;
        text-align:justify;
       
     }
    #preamble h3 {
        margin-top:18px;
        font-family:arial,sans-serif;
        font-size:18px;
        font-style:italic;
        color:#fff;
     } 
    #preamble .p1 {
        margin-bottom:10px;
        line-height:16px;
        font-family:verdana,geneva,arial,helvetica,sans-serif;
        font-size:14px;
        font-style:italic;
        color:#000;
     }
    #footer {
        position:absolute;
        width:900px;
        height:28px;
        padding-top:20px;
        bottom:0;
        left:0;
        background-image:url(../images/footer-bg.jpg);
        font-family:verdana,sans-serif;
        font-size:small;font-size:13px;
        font-weight:bold;
        text-align:center;
     }
    #footer a {
        color:#0b3c77;
        text-decoration:none; 
     }
    #footer a:hover {
        color:#00c;
        text-decoration:underline;
     }

  2. #2
    Join Date
    Feb 2014
    Location
    Canada
    Posts
    155
    HTML Code:
    <head>
        <style>
             #coolpic
             {
                 height: 50%; <!-- or specify in another % or use auto to let the browser handle it -->
                 width: 40%; <!-- or specify in another %  -->
                 max-width: 100%;
             }
         </style>
    </head>
    <!-- somewhere in the <body> -->
    <img id = "coolpic" src = "myPic.jpg" alt = "My cool picture" />
    In each page, just adjust the width and height accordingly in percentage to make the image size change as the browser size changes. If you don't care about changing with the browser size, then specify in px, such as 500px; .

  3. #3
    Join Date
    Nov 2011
    Posts
    126
    I think I explained myself wrong. My fault. On my first page I have a full body picture, but on all other pages. I will just have a head shot.

  4. #4
    Join Date
    Mar 2012
    Posts
    1,511
    Quote Originally Posted by Maxxxx View Post
    I think I explained myself wrong. My fault. On my first page I have a full body picture, but on all other pages. I will just have a head shot.
    So what is your problem? Use different pictures!!! Or is there something else you have forgotten to mention? Like are you using a CMS?
    Last edited by jedaisoul; 02-26-2014 at 08:44 AM.

  5. #5
    Join Date
    Mar 2012
    Posts
    1,511
    Quote Originally Posted by Error404 View Post
    In each page, just adjust the width and height accordingly in percentage to make the image size change as the browser size changes. If you don't care about changing with the browser size, then specify in px, such as 500px; .
    Doing that will not preserve the aspect ratio of the image. To preserve the aspect ratio, just set the width as a %. Do not set the height.

  6. #6
    Join Date
    Feb 2014
    Location
    Canada
    Posts
    155
    Quote Originally Posted by Maxxxx View Post
    I think I explained myself wrong. My fault. On my first page I have a full body picture, but on all other pages. I will just have a head shot.
    Rather than going through the unnecessary effort of having your browser crop the image, just crop it yourself and upload them as 2 separate pictures.

    Quote Originally Posted by jedaisoul View Post
    Doing that will not preserve the aspect ratio of the image. To preserve the aspect ratio, just set the width as a %. Do not set the height.
    I guess you learn something new every day!

  7. #7
    Join Date
    Nov 2011
    Posts
    126
    I got it figured out. I just made another copy of my css and named it main2.css and changed the link on just that page. I'm just working on trying to pull the little image closer in to the rest of the content.


    http://www.charismacommunications.ca/

  8. #8
    Join Date
    Mar 2014
    Posts
    24
    We can change the size of image with the help of its properties..You can change the height and width.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles