twitter-bootstrap 垂直居中响应图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15443230/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Vertically Center Responsive Image
提问by Raphael Rafatpanah
I am wondering if there is a simple way to vertically center a responsive image.
我想知道是否有一种简单的方法可以垂直居中响应图像。
Please refer to the following jsFiddle: http://jsfiddle.net/persianturtle/yawTb/1/
请参考以下jsFiddle：http: //jsfiddle.net/persianturtle/yawTb/1/
Basic HTML:
基本 HTML：
<img class="mobile-title-size" src="http://zx85.dyndns.org/raphtest/img/title.png" alt="Logo">
Basic CSS:
基本CSS：
.mobile-title-size {
position: absolute;
top: 2.5%;
left: 6%;
width: 70%;
max-width: 300px;
}
}
This is the mobile header that uses the same image that is displayed on tablet and desktop viewports. Since the image is already being loaded anyway, I am looking to use this same image, resize it smaller and vertically align it so that I can use one image for all viewports.
这是使用在平板电脑和桌面视口上显示的相同图像的移动标题。由于无论如何图像已经被加载，我希望使用相同的图像，将其缩小并垂直对齐，以便我可以对所有视口使用一个图像。
The Problem:On browser resize, the image does get smaller, but it does not vertically align in the center.
问题：在浏览器调整大小时，图像确实变小了，但它没有在中心垂直对齐。
The Goal:Even though the width overlaps badly in this example, it is not an issue on my site. The goal is only to vertically center the image as the browser resizes.
目标：即使在这个例子中宽度重叠得很厉害，这在我的网站上不是问题。目标只是在浏览器调整大小时垂直居中图像。
I am okay with using a javascript/jQuery solution but of course, simple CSS is preferred.
我可以使用 javascript/jQuery 解决方案，但当然，简单的 CSS 是首选。
Any help is greatly appreciated!
任何帮助是极大的赞赏！
回答by Terry
There are several ways to do it - purely CSS or a JS-based method.
有几种方法可以做到这一点 - 纯 CSS 或基于 JS 的方法。
Updated answer
更新答案
Update:With the advent of CSS transform support, here is a rather elegant solution of positioning elements using pure CSS. With the given markup:
更新：随着 CSS 转换支持的出现，这里有一个使用纯 CSS 定位元素的相当优雅的解决方案。使用给定的标记：
<div class="container">
<img src="..." alt="..." title="..." />
</div>
For your CSS:
对于您的 CSS：
.container {
/* The container has to have a predefined dimension though */
position: relative;
}
.container img {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
Old answer
旧答案
For CSS, you can construct a ghost element within the container of the <img>element. Chris Coyier did an excellent write up on this technique. Let's say your HTML code looks like this:
对于 CSS，您可以在元素的容器内构造一个幽灵<img>元素。Chris Coyier对这项技术做了出色的撰写。假设您的 HTML 代码如下所示：
<div class="container">
<img src="..." alt="..." title="..." />
</div>
Then your CSS would be:
那么你的 CSS 将是：
.container {
font-size: 0;
text-align: center;
}
.container:before {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
}
.container > img {
display: inline-block;
vertical-align: middle;
}
The functional CSS fix can be seen working in this fiddle - http://jsfiddle.net/teddyrised/yawTb/8/
可以在这个小提琴中看到功能性 CSS 修复 - http://jsfiddle.net/teddyrised/yawTb/8/
Or, you can use a JS-based method:
或者，您可以使用基于 JS 的方法：
$(document).ready(function() {
$(window).resize(function() {
$(".container > img").each(function() {
var cHeight = $(this).parent(".container").height(),
cWidth = $(this).parent(".container").width(),
iHeight = $(this).height(),
iWidth = $(this).width();
$(this).css({
top: 0.5*(cHeight - iHeight),
left: 0.5*(cWidth - iWidth)
});
});
}).resize(); // Fires resize event when document is first loaded
});
But you will have to use the following CSS:
但是您必须使用以下 CSS：
.container {
position: relative;
}
.container img {
position: absolute;
z-index: 100;
}
[Edit]: For the JS-based method where you absolutely position the image element, you will have to explicitly state the dimensions of the .containerelement, or have some content in it (but it kind of defeats the purpose because the image will be above the content). This is because the image element has been taken out of the document flow, and therefore its dimensions will not affect the size of the parent container.
[编辑]：对于绝对定位图像元素的基于 JS 的方法，您必须明确说明.container元素的尺寸，或者在其中包含一些内容（但这有点违背了目的，因为图像将在上面内容）。这是因为图像元素已从文档流中取出，因此其尺寸不会影响父容器的大小。
The working example of the JS version is here - http://jsfiddle.net/teddyrised/yawTb/7/
JS 版本的工作示例在这里 - http://jsfiddle.net/teddyrised/yawTb/7/
回答by Vandervals
The solution you've got works for old browsers but in the near future (right now has around the 80% of the browser support) you can do this, a much simpler and elegant solution:
您拥有的解决方案适用于旧浏览器，但在不久的将来（现在大约有 80% 的浏览器支持）您可以这样做，这是一个更简单和优雅的解决方案：
.container img{
width: 100%;
height: auto;
}
@supports(object-fit: cover){
.container img{
height: 100%;
object-fit: cover;
object-position: center center;
}
}
回答by Raphael Rafatpanah
So, I found something that works exactly as I wanted: http://jsfiddle.net/fmwzT/
所以，我发现了一些完全符合我想要的东西：http: //jsfiddle.net/fmwzT/
The problem is that it ONLY works with bootstrap's newest version 2.3.1 and I have no idea why (I have 2.3.0 on my site).
问题是它只适用于引导程序的最新版本 2.3.1，我不知道为什么（我的网站上有 2.3.0）。
So now I have answered my question and raised an even bigger question, what is causing this to work?
所以现在我已经回答了我的问题并提出了一个更大的问题，是什么导致它起作用？
Note, it does use the following code:
请注意，它确实使用了以下代码：
HTML
HTML
<div id="f1"><div id="outer-element"><img id="inner-element" src="http://zx85.dyndns.org/raphtest/img/title.png" alt="Logo"></div></div>
CSS
CSS
#fl {
float: left;
}
#outer-element {
display: table-cell;
vertical-align: middle;
height: 40px;
max-width: 300px;
}
#inner-element {
display: inline-block;
margin-left: -20px;
}
NOTE: This does NOT work without Bootstrap's neweste 2.3.1 version.
注意：如果没有 Bootstrap 的最新 2.3.1 版本，这将不起作用。
I will be posting a question to see if anyone knows!
我会发一个问题看看有没有人知道！
