Question

我正试图将图像置于网站上。因为我希望它在水平和垂直方向都居中，所以我使用了表格/表格单元布局如下：

<div id="mainContainer>
    <div id="horizon">
        <img src="url">
    </div>
</div>

这里mainContainer设置为 display：table ，horizon设置为 display：table-cell 。

不幸的是，图像不再按比例调整大小，因为它成为此结构的一部分。一旦我将其移动到table / table-cell div中，它就会调整为原始大小（而不是按比例调整大小，因为 max-width：100％和 max-height：100 ％）

请参阅：http://jsfiddle.net/U8KcN/

修改

我的坏。我只是想简化这个问题。我想为图像构建一个小幻灯片。这里的问题是我不知道图像的大小（指其他人使用幻灯片）。因此，简单来说，我需要一个特定的CSS，1）如果图像的宽度和高度小于div的尺寸，则在div中垂直和水平居中图像; 2）如果图像大于div的尺寸，则自动调整图像大小（不需要添加，不知道它的宽度或高度是否更大）。

来源：OP Comment

Answer 1

每当我听到有人谈论使用表格的邪恶，然后看到他们用DIV创建一个完整的表格结构，其标记量几乎相同 - 有时候更多 - 它真的让我紧张。“ p>

顺便说一下，你有没有为那些希望使用像Wordpress这样的CMS在内容区域做一些自己的布局的人开发一个网站？几乎没有HTML知识的人能够做到这一点的唯一方法就是允许他们在Tiny MCE或其他编辑器中使用表格工具。所以，表格仍然很重要。

最近，我不得不为客户做到这一点，但表格单元格中的图像没有响应，缩小了屏幕尺寸。所有我必须添加到我的CSS来解决这个问题是：

table {

   table-layout: fixed; 

}

现在表格单元格中的图像正在增长并相应缩小，水平滚动条不再出现。哦，当然你也必须在表宽和td宽度中使用百分比。

Answer 2

如何放弃＆＃34; CSS-table＆＃34;东西，做得更容易一点？

<div style="width:auto;height:auto;margin:25%;text-align:center;vertical-align:middle">
     <img src="URL">
</div>

至少，这就是我如何处理它......

修改

请注意，我已将CSS内联显示为哪个元素应该获得什么样式。在制作中，您应该 - 作为对此答案的正确陈述的评论 - 始终将样式与代码分开。所以，实际上，你最终会得到这样的东西：

<style> .centerimg { width:auto; height:auto; margin:25%; text-align:center; vertical-align:middle } </style> ... <div class="centerimg"> <img src="#"> </div>

编辑2：

回复相关评论，这里有更新，以使图片按比例适合父母：

如果您的图片宽度大于高度......

<style> ... img{ max-width:100%; height:auto } </style>

或者，如果您的图片宽度小于高度......

<style> ... img{ max-height:100%; width:auto } </style>

编辑3：

看着你的小提琴，我想出了这个就像你希望它起作用一样：

<style> *{ width:100%; height:100%; margin:0; text-align:center; vertical-align:middle } img{ width:auto; height:100%; } </style>

我已经将你的小提琴分开来显示更新：http://jsfiddle.net/LPrkb/1/

编辑3：

由于OP似乎无法决定他的需求，因此我会根据他的最新评论添加此最终编辑。

您还可以使用带有＆＃34;背景大小的CSS背景图片：包含＆＃34;在＆＃34; mainContainer＆＃34;并完成它...检查http://jsfiddle.net/HGpfJ/2/或者看看这个100％的工作示例，采用完全不同的方法，产生相同的效果/功能：

<!DOCTYPE HTML> <html itemscope="itemscope" itemtype="http://schema.org/WebPage"> <head> <title>Example</title> <style> html,body{width:100%;height:100%;margin:0;padding:0} #centerimg{ width:100%; height:100%; background:transparent url(http://oi42.tinypic.com/v9g8i.jpg) no-repeat scroll center; background-size:contain; } </style> <body> <div id="centerimg"></div> </body> </html>

让我们面对事实：根据文档结构中您希望图像居中的位置，有十几种方法可以实现。

如果OP需要特定代码，我们将需要来自OP的完整文档结构，而不仅仅是＆＃34;通用＆＃34; 代码片段，它可以是任何文档结构中的任何位置。< / p>

Answer 3

使用表格（display: table-cell）进行布局是目前Web开发的反模式。尝试将<span>元素与display: inline-block一起使用，使图像垂直和水平居中，因为此方法将work all the way back to IE 6。此外，如果您希望根据容器调整图像大小，可以将图像大小更改为百分比：

http://jsfiddle.net/hHWy8/1/

HTML：

<span class="horizontal">
    <span class="vertical">
        <img src="url" />
    </span>
</span>

CSS：

span {
    display: inline-block;
}
span.horizontal {
    text-align: center;
    width: 100%;
}
span.vertical {
    vertical-align: middle;
    border: 1px solid black; /* put a border on container for display purposes */
    line-height: 1000px;     /* this sets the vertical height */
    overflow: hidden;
    white-space: nowrap;
}
span.vertical img {
    height: 50px; /* set your image height (could be percent) */
    width: 50px;  /* set your image width (could be percent) */
}
span.vertical br {
    display: none;
}

Answer 4

要调整图片大小，您可以使用此css：

    html,body,div,img{
        height:100%;
    }

    img { width:100%}

它将html和body的高度设置为100％，这是必需的，因此页面的高度占用了所有可用空间

图像不再像表单元格布局中那样响应

4 个答案: