图像在表格单元格布局中不再响应答案

【问题标题】：Image no longer responsive as put in table cell layout图像在表格单元格布局中不再响应
【发布时间】：2013-06-25 02:22:27
【问题描述】：

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

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

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

不幸的是，图像不再按比例调整大小，因为它成为此结构的一部分。一旦我将它移动到表格/表格单元格中，它就会调整到其原始大小（而不是因为 max-width: 100% 和 max-height: 100 而按比例调整大小%)

见：http://jsfiddle.net/U8KcN/

编辑：

我的错。我只是试图简化问题。我想为图像制作一个小幻灯片。这里的问题是我不知道图像的尺寸（参考使用幻灯片的其他人）。所以简单来说，我需要一个特定的 CSS 1）如果图像的宽度和高度小于 div 的尺寸，则图像在 div 中垂直和水平居中，2）如果图像大于 div 的尺寸，则自动调整图像大小（不必要补充一下，不知道是宽度还是高度更大）。

来源：OP Comment

【问题讨论】：

标签： javascript html css

【解决方案1】：

放弃那些“CSS-table”的东西并让它变得更容易一些怎么样？

<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>

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

编辑 3：

由于 OP 似乎无法决定他需要什么，由于他的最新评论，我将添加此最终编辑。

您还可以在“mainContainer”上使用带有“background-size:contain”的 CSS 背景图像并完成它...检查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 的完整文档结构，而不是简单的 “通用” code-sn-p，它可以在任何文档结构中的任何位置。

【讨论】：

附上 CSS 不应内联的附录。
@RyanKinal 这就是逻辑……我们完全一样认为！我编写 CSS 内联代码的唯一原因是让什么元素应该得到什么样式很明显，而不是使用多个段落来解释它。 ;)
@RyanKinal 在答案中添加了“编辑”以实施您的正确附录。感谢您的提醒，使我的回复更加完整。
你的建议不是我想要的。我正在寻找一种无滚动（溢出：隐藏）解决方案，其中图像被调整大小（按比例）以适合其父 div。（您的解决方案看起来像 jsfiddle.net/TD7RU）
还有那个vertical-align: center不存在的附录。

【解决方案2】：

使用表格 (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;
}

【讨论】：

对我来说，图像似乎只是缩小到指定的值。但我希望它按比例调整大小（如果它比它的容器大）。否则我希望它在父容器中居中。
@ШтефанСуркамп 如果您希望它按比例调整大小，您可以使用百分比 (%) 而不是像素 (px)。
如上所述，我事先不知道图像是否适合容器，它的宽度，高度或两者是否更大。

【解决方案3】：

要调整图像大小，您可以使用以下 css：

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

    img { width:100%}

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

【讨论】：

不幸的是，我不知道图像的尺寸是小于还是大于 div 的尺寸。请参阅上面我对@e-sushi 回答的回复。

【解决方案4】：

每次我听到有人谈论使用表格的坏处，然后看到他们用几乎相同数量的标记（有时甚至更多）创建一个完整的表格结构，我真的很紧张。

顺便说一下，您是否曾经为想要使用 WordPress 等 CMS 在内容区域中进行一些自己的布局的人开发过网站？几乎没有 HTML 知识的人可以做到这一点的唯一方法是允许他们在 Tiny MCE 或其他编辑器中使用表格工具。所以是的，表格仍然很重要。

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

table {

   table-layout: fixed; 

}

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

【讨论】：

此外，与 Outlook 兼容的电子邮件需要响应式表格布局。