Skip navigation

Dreamweaver

reelhero

Currently Being Moderated

resizing images in a div to fit browser width

Apr 12, 2012 1:34 PM

i have a page with rollovers in a DIV:

http://toddheymandirector.com/REEL/index_newlook.html

i want the the images, "nike the getaway", etc, to resize to fit the browser window width. i tried putting them in a div and adding

}

row {

max-width: 100%;

height: auto;

width: auto\9; /* ie8 */

}

but it didnt work..

ideas?

thanks

3426 Views 10 Replies Latest reply: reelhero, Apr 13, 2012 12:42 PM

Replies

Currently Being Moderated

1. Ken Binney,

Apr 12, 2012 2:15 PM in reply to reelhero

Report

My aim is to be constructive here.

Did you know that, next to uninvited sound, the thing visitors dislike most is a horizontal scroll bar?
Your current layout is a screen and a half wide.

Are you aware that ther is not a single word of content for Google to rank and drive traffic to your site?

|
Mark as:
Currently Being Moderated

2. reelhero,

Apr 12, 2012 2:21 PM in reply to Ken Binney

Report

ken i appreciate the post - this is a test page to get the format to work - i will add the content (a vast portfolio of commercials i have directed) when i get it to work - which was my question - see above - how do i get those images to resize to FIT the browser window - so there ISNT a horizontal scroll bar

thanks!

|
Mark as:
Currently Being Moderated

3. Ken Binney,

Apr 12, 2012 2:48 PM in reply to reelhero

Report

Sorry, I made a silly assumption you were seeking to expand you images, rather than shrink them.
I know of no way to line up all those 300px wide images in a let's say 980px container and have them fit.

My suggestion would be to rearrange them, use thumbnails with disjointed full-size rollovers,
or use a gimmick like Photostack, Carousel, or a javascript zoom.

If you can't fine these, I'll find them for you

|
Mark as:

Currently Being Moderated

4. Rik Ramsay,

Apr 12, 2012 4:05 PM in reply to reelhero

Report

You could try something like the below. Basically it will show a maximum of 4 images per row (25%) so:

if your image width is 300px, for the browser to view all 4 at 100% their window needs to be 1200px wide
if their browser window is smaller than 1200px, the images will start to move onto new rows
if the browser window is bigger than 1200px, it will scale the 4 up to fit the width.

You can change the width of the images to match your optimal browser window and/or change the percentages to see the effect it has.

Eg, if you remove the "min-width:25%;" from #gallery ul li it will not scale the images at all. If you change "min-width:25%;" to "width:25%;", it will always show 4 images in a row and scale up or down to fit the window.

Best thing to do is play around until you're happy. Good luck.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
body{
    background-color:#666666;
    margin:0;
    padding:0;
}

#container{
    width:100%;
    height:auto;
    margin:0;
    padding:0;
}

#title{
    width:100%;
    float:left;
    color:#FFFFFF;
    font-family:Arial, Helvetica, sans-serif;
    font-size:140%;
    line-height:150%;
    margin-bottom:30px;
    text-align:center;
}

#gallery{
    width:100%;
    height:auto;
    margin:0;
    padding:0;
    float:left;
}

#gallery ul{
    width:100%;
    height:auto;
    margin:0;
    padding:0;
    float:left;
    background-color:#666666;
    list-style-type:none;
}

#gallery ul li{
    min-width:25%;
    display:block;
    margin:0;
    padding:0;
    float:left;
    background-color:#666666;
}

img{
    display:block;
    border:none;
    margin:0;
    padding:0;
    width:100%;
}
</style>
</head>

<body>
<div id="container">
<div id="title">This is a floating web gallery</div>
<div id="gallery">
<ul>
<li><img src="nike.png" /></li>
<li><img src="nike.png" /></li>
<li><img src="nike.png" /></li>
<li><img src="nike.png" /></li>
<li><img src="nike.png" /></li>
<li><img src="nike.png" /></li>
<li><img src="nike.png" /></li>
<li><img src="nike.png" /></li>
<li><img src="nike.png" /></li>
</ul>
</div>
</div>
</body>
</html>

Mark as:

Currently Being Moderated

5. reelhero,

Apr 12, 2012 4:59 PM in reply to Rik Ramsay

Report

thanks so much riki..that could be kind of cool.... ill be doing a page with 12 commercials (MORE) as well so that might be great for that..
i havent done ul lis but ill give it a shot

i almost got it here
http://toddheymandirector.com/stretch2.html

riki/ken -- ultimately each rollover will have a video link to play the commercial..i was planning on using a pop up like lightbox

|
Mark as:

Currently Being Moderated

6. Rik Ramsay,

Apr 12, 2012 5:17 PM in reply to reelhero

Report

I see you changed the Doctype to HTML 5. If that is what you are planning, then there might be a better way of pulling them together:

<!DOCTYPE>
<html>
<head>
<meta content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
    background-color:#666666;
    margin:0;
    padding:0;
    font-family:Arial, Helvetica, sans-serif;
    color:#FFFFFF;
}
#container {
    width:100%;
    height:auto;
    margin:0;
    padding:0;
}
#title {
    width:100%;
    float:left;
    font-size:140%;
    line-height:150%;
    margin-bottom:30px;
    text-align:center;
}
#gallery {
    width:100%;
    height:auto;
    margin:0;
    padding:0;
    float:left;
}

figure {
    min-width:25%;
    margin:0;
    padding:0;
    float:left;
    background-color:#666666;
}
figcaption {
    font-size:100%;
}
img {
    display:block;
    border:1px solid #FFFFFF;
    margin-bottom:5px;
    padding:0;
    width:100%;
}
</style>
</head>

<body>
<div id="container">
  <div id="title">This is a floating web gallery</div>
  <section id="gallery">
    <figure> <img src="nike.png" />
      <figcaption>This is an image</figcaption>
    </figure>
    <figure> <img src="nike.png" />
      <figcaption>This is an image</figcaption>
    </figure>
    <figure> <img src="nike.png" />
      <figcaption>This is an image</figcaption>
    </figure>
    <figure> <img src="nike.png" />
      <figcaption>This is an image</figcaption>
    </figure>
    <figure> <img src="nike.png" />
      <figcaption>This is an image</figcaption>
    </figure>
    <figure> <img src="nike.png" />
      <figcaption>This is an image</figcaption>
    </figure>
    <figure> <img src="nike.png" />
      <figcaption>This is an image</figcaption>
    </figure>
    <figure> <img src="nike.png" />
      <figcaption>This is an image</figcaption>
    </figure>
  </section>
</div>
</body>
</html>

You can then link each image to open the video as a lightbox. Try: http://videolightbox.com/

Mark as:

Currently Being Moderated

7. reelhero,

Apr 12, 2012 5:31 PM in reply to Rik Ramsay

Report

i did a rough test
http://toddheymandirector.com/REEL/index_newlook_gallery.html
there are issues witht he social media buttons getting screwy

also i used jquery to script a fade hover as well as a a fade in.. load the original page here and youll see.. see the rollovers fade in/out
http://toddheymandirector.com/REEL/index_newlook.html

will i still be able to do that with a gallery?

|
Mark as:
Currently Being Moderated

8. Nancy O.,

Apr 12, 2012 5:53 PM in reply to reelhero

Report

Hey Todd,
Re-scaling seems to work best with one image inside a liquid (% based) container. You cannot do this successfully with absolutely positioned elements.
http://alt-web.com/TEMPLATES/ResponsiveDesign1.shtml

Nancy O.

|
Mark as:
Currently Being Moderated

9. reelhero,

Apr 12, 2012 6:07 PM in reply to Nancy O.

Report

that seems to be the case - i almost got it here
http://toddheymandirector.com/stretch2.html

will i be able to add all the jquery script that i have here http://toddheymandirector.com/REEL/index_newlook.html to a gallery like that?

i think a good solution would be to resize the original thumbs so it doesnt look so choppy when its rescaling (bigger image jumping is jarring)

|
Mark as:
Currently Being Moderated

10. reelhero,

Apr 13, 2012 12:42 PM in reply to reelhero

Report

hey guys

i got the thumbs to resize and drop to the next line with both your help

http://toddheymandirector.com/REEL/index_newlook_gallery2.html

but i cant seem to get the jquery scripts that i have here to work (the faded2 and fadehover (the rollover dissolve and the fade on effect)

http://toddheymandirector.com/REEL/index_newlook.html

i also cant get them to link individually, if i add a href they all link to one link

and the images size of the soical networking buttons (twitter, google plus) get distorted

|
Mark as:

Forum guidelines

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

Dreamweaver

resizing images in a div to fit browser width

Apr 12, 2012 1:34 PM

More Like This

Bookmarked By (0)

Answers + Points = Status