约束表高度和图像容器

的高度，我有以下的测试在这里：http://dev.driz.co.uk/gallery/index2.php 约束表高度和图像容器

的想法是，图像应画廊专区内的中心位置，具有填充围绕它一路72px。如果图像小于屏幕，则它将居中（此部分起作用），但如果图像大于屏幕，则应根据最佳比例重新调整其大小以适合自己。

这是通过将图像最大高度和最大宽度设置为100％来实现的，因此图像受其容器元素的限制。在这种情况下，容器是两个带有CSS的伪造表格，以便将其集中在页面上。

实际发生的情况是，图片只是忽略了最大高度属性，只应用了宽度约束，因此它显示在页面外。

关于这个问题的任何想法？在过去，我刚刚使用JavaScript来定位图像的中间位置，但喜欢只使用CSS，如示例中所示。

的完整代码如下：

<!doctype html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
     <title>Center</title> 
     <style type="text/css"> 

      * 
      { 
       margin: 0; 
       padding: 0; 
       border; 0; 
      } 

      html,body 
      { 
       height: 100%; 
       width: 100%; 
      } 

      body 
      { 
       overflow: hidden; 
      } 

      .gallery 
      { 
       position: fixed; 
       top: 0; 
       left: 0; 
       right: 0; 
       bottom: 0; 
       width: 100%; 
       height: 100%; 
      } 

      .gallery-background 
      { 
       background: #333333; 
       top: 0; 
       left: 0; 
       right: 0; 
       bottom: 0; 
       position: fixed; 
       padding: 72px; 
      } 

      .gallery-outer 
      { 
       display: table; 
       width: 100%; 
       height: 100%; 
       border-collapse: collapse; 
       table-layout:fixed; 
      } 
       .gallery-inner 
       { 
        text-align: center; 
        display: table-cell; 
        vertical-align: middle; 
        width: 100%; 
        height: 100%; 
       } 

      .gallery-image 
      { 
       position: relative; 

      } 

      .gallery-image img 
      { 
       max-width: 100%; 
       max-height: 100%; 
       vertical-align: middle; 


      } 

     </style> 
    </head> 
    <body class="default"> 

     <div class="gallery"> 
      <div class="gallery-background"> 

       <div class="gallery-outer"> 
        <div class="gallery-inner"> 

         <div class="gallery-image"> 
          <img src="EmpireState.jpg"> 
         </div> 

        </div> 
       </div> 

      </div> 
     </div>  

    </body> 
</html>

来源

2014-03-05 Cameron

当你给的图像100％的最大高度，它会寻找其直接父标签的高度。如果没有高度或限制，则无法将规则应用于图像的高度。看你的HTML/CSS，我会剥夺回来，并简化它像这样：

<div class="gallery"> 
    <div class="gallery-background"> 
     <img src="EmpireState.jpg"> 
    </div> 
</div>

而CSS

.gallery { 
bottom: 0; 
height: 100%; 
left: 0; 
position: fixed; 
right: 0; 
top: 0; 
width: 100%; 
} 

.gallery-background { 
background: none repeat scroll 0 0 #333333; 
bottom: 0; 
left: 0; 
padding: 72px; 
position: fixed; 
right: 0; 
text-align: center; 
top: 0; 
} 

.gallery-background:before { 
content: ' '; 
display: inline-block; 
vertical-align: middle; 
height: 100%; 
} 

.gallery-background img { 
max-height: 100%; 
max-width: 100%; 
vertical-align: middle; 
}

希望这应该整理出来

来源

2014-03-05 16:04:18

是的，这工作得很好，但图像较少，不会垂直居中。但是，我的例子使图像大于100％..所以无论如何。 –

谢谢，但它需要表的理由解释@尼科O – Cameron

是的，你是对的 - 我做了一个JSFiddle应该解决这一切：http://jsfiddle.net/jamesking/6SZD7/ - 我已经有意设置图像在HTML中的高度，以便展示它如何垂直对齐 –

约束表高度和图像容器

回答

相关问题