自适应布局上的垂直自适应图像对齐
Posted
技术标签:
【中文标题】自适应布局上的垂直自适应图像对齐【英文标题】：Vertical adaptive image alignment on adaptive layout 【发布时间】：2013-05-27 18:10:39 【问题描述】：这是我的代码：
<html>
<body>
<div id="id">
<div class="one">
<img>
</div>
<div class="two">
<img>
</div>
<div class="one">
<img>
</div>
</div>
</body>
</html>
CSS
div
float : left;
width : 33,3%
height : 100%;
img
max-width : 100%;
max-height : 100%;
div#id
position : fixed;
top : 0;
bottom : 0;
left : 0;
right : 0;
我一直在寻找这个，但无法弄清楚......
未知高度的 div 和图像图像可以改变。 如何垂直对齐 div class="one" 内的图像？ 由于这是一种自适应布局，因此必须缩放图像以防止溢出。
table-cell 或 line-height = 100% 似乎不起作用。
我真的需要 javascript 吗？ 我尝试了一个 jquery 代码，但它超出了我的知识范围，最终改变了我网站中所有图像的边距......这里是：
$(document).ready(function()
$(".one").each(function()
var wrapH = $(".one").outerHeight();
var imgH = $("img").outerHeight();
var padTop = (wrapH-(imgH))/2;
if (padTop>0)
$("img").css("margin-top", padTop + "px");
);
);
【问题讨论】：
【参考方案1】：您可以使用以下 HTML 轻松做到这一点：
<div class="wrap">
<div class="image-panel">
<img src="http://placekitten.com/300/300">
</div>
<div class="image-panel">
<img src="http://placekitten.com/400/600">
</div>
<div class="image-panel">
<img src="http://placekitten.com/200/600">
</div>
</div>
并应用以下 CSS 样式：
.wrap
border: 1px dotted blue;
display: table;
width: 100%;
.image-panel
display: table-cell;
vertical-align: middle;
text-align: center;
border: 1px dashed blue;
width: 33.3333%;
padding: 10px;
.image-panel img
width: 100%;
display: block;
在这个特定的布局中，我假设每个面板的宽度占总宽度的 33.3%，并且图像会自动缩放以适应表格单元格 div 的宽度。
演示小提琴：http://jsfiddle.net/audetwebdesign/ZBNh7/
【讨论】：
好的，这适用于我的原始代码（我错过了图像很大并且应用了 max-whith、max-height）我更新了我的问题。 所以你想要连续三张图片？并自动缩放以使其适合三个等宽的面板？ 是的，就是这样，图像自动缩放，布局适应屏幕。 感谢您的回答，这适用于 width : 100% 但图像在底部溢出并过度缩放，我不能这样。我真的需要 max-width 和 max-height 的效果...... 在我的demo中，哪个图片应该控制父div的高度？请记住，父 div 相对于其包含元素的高度为 100%，但尚未指定。那么，如果你有一些横向元素和纵向元素，你想控制哪一个高度呢？【参考方案2】：是的。我认为此时您将需要 jQuery / javaScript。
您只能真正将 img 或内联/内联块元素彼此对齐。
.block img
/* display: inline; (default) */
display: inline-block;
vertical-align: middle;
小提琴：HERE
如果你能解决它，那就太好了！我们都需要这个。
您可以使用前面提到的表格单元格......但是在响应式设置中，这不会削减它 - 特别是如果这些块位于响应式网格中。一旦你需要漂浮，这几乎是总是 - 事情会变得非常混乱。谜。
【讨论】：
我并不经常需要它。我只是不指望它会成为一种选择。几天来，我一直在尝试垂直对齐徽标和移动导航按钮。我要搞乱马克的回答。不适用于您的情况 - 但可能适用于我的小情况。【参考方案3】：好的，我终于在这篇文章中找到了使用 jquery thx 到 bdmoura 的解决方案： https://***.com/users/2442497/bdmoura 他向我展示了如何根据图像和 div 高度为图像设置自适应边距。 这是 th jquery 代码：
$(document).ready(function()
$(".one").each(function()
var wrap = $(this),
wrapH = wrap.outerHeight(),
img = wrap.find('img'),
image = new Image(),
imgH = 0,
padTop = 0;
image.onload = function ()
imgH = img.outerHeight();
padTop = ( wrapH - ( imgH ) )/2;
if ( padTop > 0 )
img.css("margin-top", padTop + "px");
image.src = img.attr('src');
);
);
感谢他！
【讨论】：
以上是关于自适应布局上的垂直自适应图像对齐的主要内容，如果未能解决你的问题，请参考以下文章