Question

我知道这个问题已经完成了死亡，所以我真的很抱歉我必须再次提出这个问题但是尽管有所有的信息，我发现没有什么能适合我的具体情况。

我目前在FF中有一个侧栏用于扩展。在这个侧边栏中，我（为了简单起见）有3件事。

<div id="resultsDiv">
     <div class="imgContainer">
          <img class="imgThumb" src="someCorrectURL"></img>
     </div>
</div>

现在，如果是这样的话，将会有一些工作解决方案，以便在“imgContainer”中以垂直为中心“imgThumb”。但是，我的尺寸为 max-height 和 max-width ，而不是常规高度/宽度。在这一点上，我不知道该怎么做。我已经尝试了5种不同的方法，人们回到常规高度/宽度的功能，但都失败了。

更多信息，我加入“resultsDiv”的原因是因为实际上其中会有多个图像，这也可能导致解决方案无效的原因。下面是我当前定义的CSS类/ ID的方式，我不应该在那里有任何没有格式化目的的属性。

.imgThumb
{
    max-width: 95px;
    max-height: 95px;   
    padding: 5px;
    cursor: pointer;
}

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

  float: left;
  text-align: center;  

  margin: 2px;  
  border-bottom: 1px solid grey;
  border-right: 1px solid grey;
  background: #131313;
}

.resultsContainer
{
    overflow: auto;

    min-height: 750px;
}

为了展示我在说什么，我拍了一个屏幕截图，这只是使用上面的CSS，http://i167.photobucket.com/albums/u130/MercilessShadow/ffext-cqsSS.png。正如您所看到的那样，宽大于高的图像漂浮在容器顶部附近，我试图将它们放到中间位置。图像2和图3就是这样的例子。

如果有人能指出我正确的方向来寻求功能性解决方案，那将是令人难以置信的感激之情。

Answer 1

我不确定你在寻找什么，我想你是想在div中垂直对齐一个或多个图像？（也许？我不确定最大高度/宽度在哪里成为问题。）

如果是这样......这对你有用：

<!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>
        <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>

请更正我可能误解的任何内容，我一定会检查以进行任何更正。

干杯。

Answer 2

我最后选择了别人推荐给我的方法。您只需将图像设置为div的背景图像，然后以这种方式对其进行操作。所以对于我的具体情况，它将是：

//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);

那里有一些额外的东西，但我确信任何想要用它作为参考的人都能够确定他们需要什么以及他们不需要什么。

感谢您的帮助！

FF扩展 - 垂直对齐Div内部的图像（使用max-height / max-width）

2 个答案: