FF 扩展 - 垂直对齐 Div 内部的图像（使用最大高度/最大宽度）

发布于 2024-09-19 07:11:54 字数 1355 浏览 6 评论 0 原文

我知道这个问题已经被问完了，所以我真的很抱歉我不得不再次问它，但尽管有所有的信息，我没有找到任何适合我的具体情况的信息。

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

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

现在，如果是这样，那么将有几个工作解决方案可以在“imgContainer”中垂直居中“imgThumb”。但是，我的尺寸是最大高度和最大宽度，而不是常规高度/宽度。此时，我不知道该怎么办。我尝试过大约 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 就是这样的示例。

如果有人能为我指明功能解决方案的正确方向，我将不胜感激。

原文

I know this question has been done to death, so I'm really sorry that I have to ask it again but despite all of the information out there, I have found nothing that works for my specific circumstance.

I currently have a sidebar in FF for an extension. Within this sidebar, I have(for simplicities sake) 3 things.

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

Now if this were it, there would be a couple of working solutions for vertically centering "imgThumb" within "imgContainer". However, my dimensions are max-height and max-width, as opposed to the regular height/width. At this point, I dont know what to do. I have tried probably 5 different methods that people back as functional for regular height/width and all have failed.

Some more information, the reason I included "resultsDiv" is because in reality there will be more than one image within it, which may also contribute to why the solutions aren't working. Below are how my CSS classes/ids are currently defined, and I shouldn't have any property currently in there that has no formatting purpose.

.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;
}

Just to show what I'm talking about, I took a screen shot, this is using the above CSS only, http://i167.photobucket.com/albums/u130/MercilessShadow/ffext-cqsSS.png. As you can see the images that are wider than tall are floating near the top of the containers, I am trying to get them to the middle. Images 2 and 3 are examples of this.

If anyone can point me in the right direction for a functional solution I would be unbelievably grateful.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

不知所踪 2024-09-26 07:12:07

我最终采用了别人向我推荐的方法。您只需将图像设置为 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);

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

感谢您的帮助！

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!

回复收藏 0 原文

森林很绿却致人迷途 2024-09-26 07:12:05

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

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

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

请纠正我可能误解的任何内容，我一定会回来检查以做出任何更正。

干杯。

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

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

Cheers.

回复收藏 0 原文

~没有更多了~