复杂的CSS图像居中帮助？

我的问题比标题说得复杂一点。对不起，我不知道如何更具体...复杂的CSS图像居中帮助？

我正在一个网站上，我遇到了一个部分，我应该显示一些缩略图。事情是，缩略图的尺寸不匹配。（我知道，这听起来很可笑，因为这是缩略图，对吧？）不，没有办法在相同的尺寸下创建它们！我已经设法创建了一个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; }

来源

2011-06-27 Tenshiko

请出示你的代码 – sandeep

做你想要做一个纯CSS居中或者是你不反对用js来做到这一点？我可以为您提供一个jQuery解决方案（也许尺寸插件扩展） –

我只想尽可能地坚持CSS。 – Tenshiko

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

编辑：

我的问题比冠军更复杂一点说

这是一种轻描淡写！

我想我有something working，虽然你需要添加一些内联样式取决于图像的大小。大多数CSS是共享的，因此只有需要设置的margin-left和margin-top取决于您要居中的图像是大于还是小于一个或两个缩略图尺寸（在此示例中为120x80px）。

我从您的问题中看到，您知道服务器端代码中的图像尺寸，因此您应该能够推广逻辑以为每个图像创建必要的内联样式。总之，我使用2的任何给定的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"> 
      <!-- 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>

我怀疑这是完全免费的错误，但我希望这是一个良好的开端您的问题:-)

来源

2011-06-27 13:07:59 andyb

差不多。我想拉伸图像，以便它们周围不会有空白区域。我解决了拉伸问题，但看起来好像中心技巧不利于消极利润。 – Tenshiko

如果你想拉伸图像，你可以将CSS更改为'img {width：120px;高度：82px; }'。从这个问题来看，我认为你想要将图像居中。这是不正确的？ **编辑：**好了我现在明白了这个问题。我会看看我能做什么。 – andyb

是的，我得出了类似的结论。不幸的是，我在这方面与我一起工作的同事对内联样式和JavaScript“过敏”。但是，如果没有其中之一，这似乎无法奏效。 – Tenshiko

图片会直接。将它们设置为显示：block以使用margin：auto或仅在div.inner元素中使用text-align：center。

对于垂直对齐，你需要设置显示：表细胞的div.inner元素，另外垂直对齐：中间

来源

2011-06-27 12:20:46 Andreas

它没有帮助。没有什么改变。 – Tenshiko

你是否尝试过使用文字对齐或设置图像的显示来阻止 – Andreas

这两个实际。问题是它们应该垂直和水平居中。文本对齐只能解决水平部分，边距：auto似乎什么都不做。 – Tenshiko

复杂的CSS图像居中帮助？

回答

相关问题