垂直居中响应图像 [英] Vertically Center Responsive Image
问题描述
我想知道是否有一个简单的方法来垂直居中响应的图像。
请参阅以下jsFiddle： http://jsfiddle.net / persianturtle / yawTb / 1 /
基本HTML：
< img class =mobile-title-sizesrc =http://zx85.dyndns.org/raphtest/img/title.pngalt =Logo>
基本CSS：
.mobile-title-size {
position：absolute;
top：2.5％;
left：6％;
width：70％;
max-width：300px;
}
它使用在平板电脑和桌面视口上显示的相同图像。因为图像已经被加载了，我想使用这个相同的图像，调整它的尺寸更小，垂直对齐，使我可以使用一个图像的所有视口。
问题：在浏览器调整大小时，图片会变小，但在中心不会垂直对齐。
目标：即使此示例中的宽度重叠，这在我的网站上也不是问题。目标只是在浏览器调整大小时垂直居中图像。
我可以使用javascript / jQuery解决方案，但当然，简单的CSS是首选。 p>
任何帮助都非常感谢！
更新的答案
更新：随着CSS变换支持的出现，这里是一个相当优雅的定位元素使用纯CSS的解决方案。使用给定的标记：
< div class =container>
< img src =...alt =...title =.../>
< / div>
对于您的CSS：
.container {
/ *容器必须具有预定义的维度，但* /
position：relative;
}
.container img {
position：absolute;
top：50％;
left：50％;
-webkit-transform：translate（-50％，-50％）;
transform：translate（-50％，-50％）;
}
旧答案
对于CSS，可以在< img> 元素的容器中构造一个ghost元素。 Chris Coyier做了这项技术的优秀写作。假设您的HTML代码如下所示：
< div class =container>
< img src =...alt =...title =.../>
< / div>
那么你的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;
}
功能性的CSS修复可以在这个小提琴中工作 - http://jsfiddle.net/teddyrised/yawTb/8/
或者，您可以使用基于JS的方法：
$（document）.ready（function（）{
$（window）.resize（function（）{
$（。container> img）。each（function（）{
var cHeight = $（this）.parent ）.height（），
cWidth = $（this）.parent（。container）width（），
iHeight = $（this）.height（），
iWidth = $（this）.width（）;
$（this）.css（{
top：0.5 *（cHeight - iHeight），
left：0.5 * iWidth）
}）;
}）;
}）。resize（）; //文件首次加载时触发resize事件
}）;
但您必须使用以下CSS：
.container {
position：relative;
}
.container img {
position：absolute;
z-index：100;
}
：对于基于JS的方法，元素，你必须显式地声明 .container 元素的尺寸，或者在其中有一些内容（但是它有点失败了，因为图像将高于内容）。这是因为图像元素已从文档流中移除，因此其尺寸不会影响父容器的大小。
JS的工作示例版本在这里 - http://jsfiddle.net/teddyrised/yawTb/7/
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/
Basic HTML:
<img class="mobile-title-size" src="http://zx85.dyndns.org/raphtest/img/title.png" alt="Logo">
Basic 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.
Any help is greatly appreciated!
There are several ways to do it - purely CSS or a JS-based method.
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:
<div class="container">
<img src="..." alt="..." title="..." />
</div>
For your 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:
<div class="container">
<img src="..." alt="..." title="..." />
</div>
Then your CSS would be:
.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/
Or, you can use a JS-based method:
$(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:
.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 .container element, 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.
The working example of the JS version is here - http://jsfiddle.net/teddyrised/yawTb/7/
这篇关于垂直居中响应图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
