5

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

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

这里 mainContainer 设置为display: table和 Horizo​​n 设置为display: table-cell。

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

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

编辑：

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

来源：OP评论

4

4 回答 4

6

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

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

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

table {

   table-layout: fixed; 

}

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

于 2013-11-05T01:31:01.343 回答
2

放弃那些“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>

我已经分叉了你的小提琴来显示更新：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 的完整文档结构，而不是简单的“通用”代码片段，它可以位于任何文档结构的任何位置。

于 2013-06-27T14:25:58.950 回答
2

如今，使用表格 ( display: table-cell) 进行布局是一种 Web 开发反模式。尝试使用<span>with 元素display: inline-block将图像垂直和水平居中，因为此方法将一直有效到 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;
}
于 2013-06-27T15:02:24.270 回答
1

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

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

    img { width:100%}

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

于 2013-06-27T15:15:44.940 回答