目标:
固定高度
和可变宽度
的包装器div
。此包装器包含一张图片,其高度和宽度可变(可以是纵向或横向)。
图片应自动调整为包装器宽度
的90%
或包装器高度的90%
,以较小者为准.它也应该始终居中,水平和垂直。
通过文本描述有点困难,因此当包装器具有三种不同的可能宽度时,请参阅下面的操作屏幕截图以获取三种可能图像的示例:
我现在得到的:
我使用的结构是:div
->span
->div
->img
。
我已经完全调整大小了。我有水平定位工作。当图像受高度限制
时,我可以进行垂直定位。当图像开始变小(受宽度限制)时,垂直定位不起作用。这是因为内部 div
没有调整大小。
代码
Working Fiddle
HTML:
<div class="selected-thumb">
<span>
<div>
<img src="http://www.andymercer.net/wp-content/uploads/2014/01/tree26-300x225.jpg"></img>
</div>
</span>
</div>
<div class="selected-thumb">
<span>
<div>
<img src="http://www.andymercer.net/wp-content/uploads/2014/03/ada_complete-300x171.png"></img>
</div>
</span>
</div>
<div class="selected-thumb">
<span>
<div>
<img src="http://www.andymercer.net/wp-content/uploads/2013/12/employee_randy_fake-209x300.jpg"></img>
</div>
</span>
</div>
CSS:
.selected-thumb {
text-align: center;
background: #c0c0c0;
border: #a0a0a0 solid 1px;
margin: 20px;
height:200px;
}
.selected-thumb span {
display:block;
height:200px;
}
.selected-thumb span div {
position:relative;
max-height:90%;
max-width:90%;
height:200px;
top:50%;
margin:0 auto;
}
.selected-thumb span div img {
width:auto;
height:auto;
max-height:100%;
max-width:100%;
position:relative;
top:-50%;
}
我需要什么:
我需要修复垂直位置,但我遇到了墙。我试过使用 display:table
,我试过创建一个伪元素并使用 display:inline-block
。我找不到一种方法来完成我需要的。无论我选择哪个是正确的,所有有用的信息都会被点赞。
最佳答案
检查这个:
html,body {height:100%;}
.selected-thumb {
text-align: center;
background: #c0c0c0;
border: #a0a0a0 solid 1px;
margin: 20px;
height:200px;
line-height: 200px;
}
.selected-thumb img {
display: inline-block;
vertical-align: middle;
width:auto;
height:auto;
max-height:90%;
max-width:90%;
}
fiddle :http://jsfiddle.net/Ts4W9/2/
关于html - 在固定高度/可变宽度容器内居中可变宽度/高度图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23551635/