ansaurus

Question

FF Extension - Vertically Aligning Images Inside of Div's (Using max-height/max-width)

Answer 1

A:

I'm not really sure of what it is that you're looking for, I think you're trying to vertically align 1 or more images within a div? (maybe? I'm not sure where the max height/width becomes a problem.)

If so... this should work for you:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
    <head>
        <title>Test</title>
        <style>
            .resultsContainer {
                position:relative;
                border:solid 1px #333333;
                text-align:center;
            }
            .resultsContainer .imgContainer {
                position:absolute;
            }
            .imgThumb {
                width: 95px;
                height: 95px;   
                padding: 5px;
                cursor: pointer;
            }
        </style>
    </head>
    <body>
        <div class="resultsContainer">
            <div class=".imgContainer"><img class="imgThumb" src="someCorrectURL" alt="pic1"></img></div>
            <div class=".imgContainer"><img class="imgThumb" src="someCorrectURL" alt="pic2"></img></div>
            <div class=".imgContainer"><img class="imgThumb" src="someCorrectURL" alt="pic3"></img></div>
        </div>
    </body>
</html>

Please correct anything I may have misunderstood, and I'll be sure to check back to make any corrections.

Cheers.

S.Jones 2010-09-14 01:51:04

Alright, I gave this a shot but all it seemed to do was clump/overlap my images within the div. I didn't limit myself to only the properties that you have because I have some extra formatting I need done which I included. I'm not sure if that's whats messing it up or not.

Robert Smith 2010-09-14 17:18:08

If you can show what you're actually using (i.e. all the HTML and CSS properties), I'm certain that I or someone else here on SO will be able to help you out.

S.Jones 2010-09-14 19:40:28

Answer 2

A:

I ended up going with a method that someone else recommended to me. You just set the image as the background image of the div, and manipulate it that way. So for my specific situation it would be something like:

//CSS
.imgContainer
{
  width: 105px;
  height: 105px; 

  cursor: pointer;

  float: left;
  text-align: center;   

  margin: 5px;  
  border-bottom: 1px solid grey;
  border-right: 1px solid grey;
  background-color: #131313;
  background-repeat: no-repeat;
  background-position: center;
  -moz-background-size: auto;
  background-size: auto;
}
//Javascript
var imgSrc = //Generate URL; 
var imgBox = sidebarDoc.createElementNS(XHTML_NS, "div");

imgBox.id = //An ID;
imgBox.setAttribute("class", "imgContainer");
imgBox.setAttribute("style", "background-image: url('" + imgSrc + "')");
//imgBox.setAttribute("title", responseInJSON.SearchResultImages[i].Title);

resultsBox.appendChild(imgBox);

There is a little bit of extra in there, but I'm sure anyone that wants to use this as a reference will be able to determine what they need and what they don't.

Thanks for the help!

Robert Smith 2010-09-15 23:11:41

ansaurus

tags:

views:

answers:

FF Extension - Vertically Aligning Images Inside of Div's (Using max-height/max-width)

related questions