Skip navigation
Currently Being Moderated

How to Insert a Large image into a Fluid Grid Layout Div Tag?

Jul 12, 2013 2:24 PM

I can insert my large logo easily in a regular webpage and it fits fine. Now I'm creating a new Fluid Grid Layout and I'm starting in the Mobile view. When I select the first div tag-and use "Background Image" to locate and insert my logo it is way to big and the div tag remains small so a tiny bit of my logo shows up. How do I get it  to automatically size to fit the div tag?

 
Replies
  • Currently Being Moderated
    Jul 12, 2013 3:04 PM   in reply to sneedbreedley

    Logos belong in your HTML markup.  Not your CSS background.

    Use Insert > Image...  By default, FGLayouts will make all images a max-width 100% so they rescale with the layout.  In order for this to work, DO NOT add any height or width attributes to the image tag.

     

    <img src="your_logo.jpg"  alt="logo"  title="xyz company logo" >

     

    Working example:

    http://alt-web.com/FluidGrid/Fluid1.html 

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 13, 2013 7:54 AM   in reply to sneedbreedley

    See my post on the other thread you started concerning the same topic:

     

    http://forums.adobe.com/message/5502194#5502194

     

    My post is similar to Nancy O's. Following either answer should give you the results you're looking for.

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 13, 2013 8:32 AM   in reply to sneedbreedley

    Background images don't re-scale. Only foreground images re-scale in FGLayouts.

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 13, 2013 8:37 AM   in reply to sneedbreedley

    Okay, so it looks like the steps I outlined in the other thread are not going to work for this scenario. It appears that your logo image is being applied as a css background image as opposed to being added to your html markup and wrapped in a <img> tag.

     

    Are you dead set on doing it this way?

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 13, 2013 8:55 AM   in reply to sneedbreedley

    Are you familiar with the steps for adding an image to your page so that its gets inserted into your html markup? For example, in Design view place your cursor in the spot where you would like your image to be inserted (or better yet, in Code view place your cursor inside the containing div <div>insert cursor here</div> ) then go to the Insert menu and choose Image.

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 13, 2013 10:56 AM   in reply to sneedbreedley

    sneedbreedley wrote:

     

    The problem with that is I want the logo to fill 40% of the width of the webpage and to be centered horizontally.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

    <html>

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <title>Untitled Document</title>

    <style type="text/css">

    #header {

    text-align: center;

    }

    #header img {

    width: 40%;

    }

    </style>

    </head>

     

    <body>

    <div id="header"><img src="image.jpg"></div>

    </body>

    </html>

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 13, 2013 12:43 PM   in reply to sneedbreedley

    Try this. I'm assuming you always want the logo to be centered on any device and 40% of the screen width.

     

     

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

    <html>

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <title>Untitled Document</title>

    <style type="text/css">

    #LayoutDiv1 img {

    width: 40%;

    }

    #LayoutDiv1 {

    text-align: center;

    width: 100%;

    }

    @media only screen and (min-width: 481px) {

    .gridContainer {

    width: 98.3695%;

    padding-left: 0.8152%;

    padding-right: 0.8152%;

    }

    }

     

    </style>

    </head>

     

    <body>

    <div class="gridContainer">

    <div id="LayoutDiv1"><img src="logo.gif" alt="logo"></div>

    </div>

    </body>

    </html>

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 13, 2013 10:58 PM   in reply to sneedbreedley

    sneedbreedley wrote:

     

    You switched the order of the divs, but the layoutDiv HAS TO remain INSIDE the gridContainer. In fact everything on the page must be inside the gridContainer.

     

    Nope...I switched the order of the css. As the LayOutDiv1 will always be 100% and the image inside it will be 40% of the width it doesnt matter in what order the css is.

     

    if you want the image to do something different based on browser viewport width you specify that in the media query:

     

    @media only screen and (min-width: 481px) {

    .gridContainer {

    width: 98.3695%;

    padding-left: 0.8152%;

    padding-right: 0.8152%;

    }

    #LayoutDiv1 img {

    width: 100%;

    }

    }

     

     

    sneedbreedley wrote:

     

    Also, why is    "text-align: center"    centering an image? 

     

    Technically I don't know but I'm sure there is a reason for it if you read the WC3 specs.

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 14, 2013 1:47 PM   in reply to sneedbreedley

    sneedbreedley wrote:

     

    I'm also trying to accomplish this using the Dreamweaver CSS definition box and NOT by typing html code. But I can't get the right code situated in the right locations.

    Why make life more difficult then? If the GUI doesn't give you the result you are after, type!

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points