基于自适应布局的垂直自适应图像对齐
这是我的密码：
HTML
<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;
}我已经找了很久了但我想不出来.
未知高度的divs和图像，图像可以改变。如何垂直对齐在div class="one“中的图像？由于这是一个自适应布局，必须缩放图像以防止溢出。
表单元格或线高= 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");
}
});
});回答 3
Stack Overflow用户
发布于 2013-06-01 08:35:07
好的，在这篇文章中，我最终找到了一个使用jquery的解决方案：https://stackoverflow.com/users/2442497/bdmoura，他向我展示了如何根据图像和div高度设置图像的自适应边距。以下是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');
});
});敬他！
Stack Overflow用户
发布于 2013-05-31 20:41:41
您可以通过以下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的宽度。
演示Fiddle：http://jsfiddle.net/audetwebdesign/ZBNh7/
Stack Overflow用户
发布于 2013-05-31 20:51:50
是。我认为此时您将需要jQuery / javaScript。
您只能真正地将img或内联/内联块元素对齐。
.block img {
/* display: inline; (default) */
display: inline-block;
vertical-align: middle;
}小提琴：这里
如果你能搞清楚那就太好了！我们都需要这个。
你可以用上面提到的表格.但是在响应性的设置中，这不会切断它--特别是如果这些块位于响应网格中。一旦你需要浮动，这几乎总是-事情会变得非常混乱。神秘感。
https://stackoverflow.com/questions/16865457
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号