Question

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

我正在网站上工作，但我遇到了一个应该显示缩略图的部分。问题是，缩略图的尺寸不匹配。（我知道，这听起来很荒谬，因为这是缩略图，对吗？）不，没有办法在相同的尺寸上创建它们！我已经设法创建一个HTML + CSS结构来解决这个问题，如果它们在保持宽高比的同时它们更小，那么图像不会伸展以适应它们的容器。

唯一剩下的问题是使图像居中。由于将边距设置为“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

图片是内联的。将它们设置为显示：阻止使用边距：自动或只在div.inner元素中使用text-align：center。

对于垂直对齐，您需要将display：table-cell设置为div.inner元素，另外还需要vertical-align：middle

Answer 2

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

修改

我的问题比标题所说的更复杂

这是轻描淡写！

我认为我有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 */ }

然后，根据图片是否需要.stretchHorizontal或.stretchVertical，请添加计算出的margin-top，margin-left或margin-top和margin-left。一般规则似乎是：

如果stretchVertical添加margin-left:(scaled img width/-2)+(inner width/2)

如果stretchHorizontal添加margin-top:((scaled img height)/-2)+(inner height /2)

如果不需要拉伸（img大于120x80），请添加margin-top:img height - 80/-2和margin-left:(img width/-2)+(inner width/2)

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

<div id="roll"> <div class="outer"> <div class="inner" style="margin:-20px 0 0 0">  <img class="stretchHorizontal" src="viewport/yoda.jpg" alt=""/>  </div> </div> <div class="outer"> <div class="inner" style="margin:0 0 0 -100px">  <img class="stretchVertical" src="viewport/galaxies.png" alt=""/>  </div> </div><br/> <div class="outer"> <div class="inner" style="margin:-20px 0 0 0">  <img src="viewport/luke.jpg" alt=""/>  </div> </div> <div class="outer"> <div class="inner" style="margin:-160px 0 0 -190px">  <img src="viewport/cookie_cutter.jpg" alt=""/>  </div> </div><br/> <div class="outer"> <div class="inner" style="margin:-20px 0 0 0">  <img class="stretchHorizontal" src="viewport/vadar.gif" alt=""/>  </div> </div> <div class="outer"> <div class="inner" style="margin:-50px 0 0 -65px">  <img src="viewport/starwars.jpg" alt=""/>  </div> </div><br/> <div class="outer"> <div class="inner" style="margin:-50px 0 0 -30px">  <img src="viewport/big_luke.jpg" alt=""/>  </div> </div> <div class="outer"> <div class="inner" style="margin:-200px 0 0 0">  <img class="stretchHorizontal" src="viewport/bookmark.jpg" alt=""/>  </div> </div> </div>

我怀疑这完全没有错误，但我希望这是你的问题的良好开端： - ）

复杂的CSS图像中心帮助？

2 个答案: