我正试图将图像置于网站上.因为我希望它在水平和垂直方向都居中,我使用了一个表/表格单元布局如下：
这里mainContainer设置为显示：table和horizon设置为display：table-cell.
不幸的是,当图像成为这种结构的一部分时,图像不再按比例调整大小.一旦我将它移动到table / table-cell div中,它就会调整为原始大小(而不是按比例调整大小,因为max-width：100％和max-height：100％)
编辑：
My bad. I just tried to simplify the issue. I want to build a little slideshow for images. The problem here is that I do not know which sizes the images are (referring to someone else using the slideshow). So in simple terms I need a specific CSS that 1) centers the image vertically and horizontally in the div if its width and height are smaller than the div’s dimensions,2) resizes the image automatically if it is bigger than the div’s dimensions (unnecessary to add,it is unknown whether it’s width or height is bigger).
来源：OP Comment
最佳答案
如何放弃那些“css-table”的东西并且做得更容易一些？
至少,这就是我如何处理它……
编辑：
请注意,我已将CSS内联显示为哪个元素应该获得什么样式.在制作中,您应该 – 作为对此答案的正确陈述的评论 – 始终将样式与代码分开.所以,实际上,你最终会得到这样的东西：
编辑2：
如果你的图像宽度大于高度……
或者,如果您的图像宽度小于高度…
编辑3：
看着你的小提琴,我想出了这个就像你希望它起作用一样：
我已经把你的小提琴分开来显示更新：http://jsfiddle.net/LPrkb/1/
编辑3：
由于OP似乎无法确定他需要什么,我将根据他的最新评论添加此最终编辑.
您还可以在“mainContainer”上使用带有“background-size：contains”的CSS背景图像并完成它…查看http://jsfiddle.net/HGpfJ/2/或者查看这个100％工作示例采用完全不同的方法,这样做只会导致相同的效果/功能：
让我们面对事实：根据文档结构中您希望图像“居中”的位置,有十多种方法可以实现.
如果OP需要特定代码,我们将需要来自OP的完整文档结构,而不仅仅是一个“通用”代码片段,它可以在任何文档结构中的任何位置.
原文链接：https://www.f2er.com/html/426461.html
