图像在放入表格单元格布局时不再有响应

Image no longer responsive as put in table cell layout

本文关键字：不再 响应 布局 单元格 表格 图像      更新时间：2023-09-26

我正在尝试将图像集中在一个站点上。由于我希望它在水平和垂直方向都居中，我使用了如下的表格/表格单元格布局：

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

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

不幸的是，当图像成为这个结构的一部分时，它不再按比例调整大小。一旦我将其移动到表格/表格单元格div中，它就会调整为原始大小（而不是按比例调整大小，因为最大宽度：100%和最高高度：100%）

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

编辑：

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

来源：OP评论

每次我听到有人谈论使用表的害处，然后看到他们用几乎相同的标记量——有时更多——用div创建一个完整的表结构，这真的让我很紧张。

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

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

table {
   table-layout: fixed; 
}

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

去掉那些"CSS表"的东西，让它更容易一点怎么样？

<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:content"的CSS背景图像，然后完成它…checkhttp://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的完整文档结构，而不是简单的"通用"代码片段，它可以在任何文档结构中的任何位置。

现在，使用表（display: table-cell）进行布局是一种web开发反模式。尝试使用<span>元素和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;
}

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

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

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

相关文章：