css - 复杂的CSS图像居中帮助？

Question

我的问题比标题说的要复杂一些。抱歉，我不知道如何更具体...

我在一个网站上工作，我遇到了一个我应该显示一些缩略图的部分。问题是，缩略图的尺寸不匹配。 (我知道，这听起来很荒谬，因为这是缩略图，对吧？)不，根本没有办法以相同的尺寸创建它们!我已经成功地创建了一个 HTML+CSS 结构来解决这个问题，如果图像在保持宽高比的同时变小，则图像不会拉伸(stretch)以适合它们的容器。

剩下的唯一问题是使图像居中。由于将边距设置为“0 auto”或“auto 0”没有帮助，我尝试设置 multiple containers and setting the margins定位图像。这也不起作用:如果我将 120x120 图片放入 120x80 的内部容器中，并将容器的顶部和左侧边距设置为 -50%，则边距都变为 -60px。这可以修复吗？或者还有另一种居中图像的方法吗？

我愿意接受任何建议!

HTML:

<div id="roll">
<div class="imgfix">
    <div class="outer">
        <div class="inner">
            @if (ImageDimensionHelper.WhereToAlignImg(item.Width, item.Height, 120, 82) == ImgAlign.Width)

            <!-- ImageDimensionHelper tells me if the image should fit the 
            container with its width or height. I set the class of the img
            accordingly. -->

            {
            <img class="width" src="@Url.Content(item.URL)" alt="@item.Name"/>
            }
            else 
            {
            <img class="height" src="@Url.Content(item.URL)" alt="@item.Name"/>
            }    
            </div>
        </div>
    </div>
</div>

CSS:

.imgfix{ overflow:hidden; }
.imgfix .outer { width:100%; height:100%;}
.imgfix .inner { width:100%; height:100%; margin-top:-50%; margin-left:-50%; }
/*This div (.inner) gets -60px for both margins every time, regardless of the size of itself, or the image inside it*/
#roll .imgfix { width:120px; height:82px; border: 1px #5b91ba solid; } 
#roll .imgfix .outer { margin-top:41px; margin-left:60px; }
/*since I know specificly what these margins should be, I set them explicitly, because 50% got the wrong size.*/
#roll .imgfix img.width { width:120px; height:auto; margin: auto 0; }
#roll .imgfix img.height { height:82px; width:auto; margin: 0 auto; }

Answer 1

如果我没理解错的话this demo应该做你想做的。但是，它不适用于所有浏览器。因此，如果您需要支持 IE6/7，那么这不是正确的解决方案。

编辑:

My problem is a bit more complex than the title says

这是轻描淡写的说法!

我认为我有something working , 尽管您需要根据图像的大小添加一些内联样式。大多数 CSS 是共享的，因此只有 margin-left 和 margin-top 需要设置，具体取决于您要居中的图像是大于还是小于一个或两个缩略图尺寸(在此示例中为 120x80px)。

我从你的问题中看出你知道服务器端代码中的图像尺寸，所以你应该能够概括逻辑来为每个图像创建必要的内联样式。总之，我对任何给定的 img

使用了两种通用样式中的一种

img.stretchHorizontal { /* use when img width < 120px */
    width:100%;
}
img.stretchVertical { /* use when img height < 80px */
    height:100%;
}

为了完整性而保留的 CSS:

.outer {
    width:120px;
    height:80px;
    border:1px #5b91ba solid;
    overflow:hidden;
    display:inline-block; /* not necessary, but nice for demo */
}
.inner {
    width:120px;
    height:80px;
}
#roll {
    margin:100px 0 0 100px; /* just to move everything down and left a bit */
}

然后根据图像是否需要 .stretchHorizo​​ntal 或 .stretchVertical，添加计算的 margin-top、margin-left 或 margin-top 和 margin-left。一般规则似乎是:

• 如果 stretchVertical 添加 margin-left:(scaled img width/-2)+(inner width/2)
• 如果 stretchHorizo​​ntal 添加 margin-top:((scaled img height)/-2)+(inner height/2)
• 如果不需要拉伸(stretch)(img 大于 120x80)添加 margin-top:img height - 80/-2 和 margin-left:(img width/-2)+(内宽/2)

demo使用一些不同的图像尺寸作为示例。

<div id="roll">
    <div class="outer">
        <div class="inner" style="margin:-20px 0 0 0">
            <!-- margin-top:((scaled img height)/-2)+(inner height /2) = ((120/100 * 100 = 120)/-2)+ 40 = -20px -->
            <img class="stretchHorizontal" src="viewport/yoda.jpg" alt=""/> <!-- 100x100 -->
        </div>
    </div>
    <div class="outer">
        <div class="inner" style="margin:0 0 0 -100px">
            <!-- margin-left:(scaled img width/-2)+(inner width/2) so margin-left:((80/80 * 320 /-2)+60 = -160+60 = -100px-->
            <img class="stretchVertical" src="viewport/galaxies.png" alt=""/> <!-- 320x80 -->
        </div>
    </div><br/>
    <div class="outer">
        <div class="inner" style="margin:-20px 0 0 0">
            <!-- margin-top:((scaled img height)/-2)+(inner height /2) = ((120/120 * 120 = 120)/-2)+ 40 = -60 + 40 = -20px margin-left:(120/-2)+60 = 0-->
            <img src="viewport/luke.jpg" alt=""/> <!-- 120x120 -->
        </div>
    </div>
    <div class="outer">
        <div class="inner" style="margin:-160px 0 0 -190px">
            <!--  margin-top:img height - 80/-2 = -160px margin-left:(img width/-2)+(inner width/2) so margin-left:(500/-2)+60 = -190px-->
            <img src="viewport/cookie_cutter.jpg" alt=""/> <!-- 500x400 -->
        </div>
    </div><br/>
    <div class="outer">
        <div class="inner" style="margin:-20px 0 0 0">
            <!-- margin-top:((scaled img height)/-2)+(inner height /2) = ((120/50 * 50 = 120)/-2)+ 40 = -20px -->
            <img class="stretchHorizontal" src="viewport/vadar.gif" alt=""/> <!-- 50x50 stretchVertical or stretchHorizontal does not matter for images smaller than both inner dimensions -->
        </div>
    </div>
    <div class="outer">
        <div class="inner" style="margin:-50px 0 0 -65px">
            <!-- margin-top:img height - 80/-2 = -50px margin-left:(250/-2)+60=-65px -->
            <img src="viewport/starwars.jpg" alt=""/> <!-- 250x180 -->
        </div>
    </div><br/>
    <div class="outer">
        <div class="inner" style="margin:-50px 0 0 -30px">
            <!-- margin-top:img height - 80/-2 = -50px margin-left:(180/-2)+60=-30px-->
            <img src="viewport/big_luke.jpg" alt=""/> <!-- 180x180 -->
        </div>
    </div>
    <div class="outer">
        <div class="inner" style="margin:-200px 0 0 0">
            <!-- margin-top:scaled img height/-2+(inner height /2) so (120/50 * 200 = 480)/-2 = -240px + 40 = -200px-->
            <img class="stretchHorizontal" src="viewport/bookmark.jpg" alt=""/> <!-- 50x200 -->
        </div>
    </div>
</div>

我怀疑这是否完全没有错误，但我希望这是解决您的问题的良好开端:-)