这个 CSS:
.outer-img-wrap {
border: 2px solid gray;
margin: 1vw auto;
max-width: 192px;
text-align: center;
overflow: hidden;
}
.outer-img-wrap img {
width: auto !important;
height: auto !important;
max-width: 100%;
vertical-align: middle;
}
.inner-img-wrap {
background: #000;
border: thin solid #ff9900;
margin: 2px;
}
应用于此HTML:
应用于此HTML:
<td style="width: 25%">
<div class="outer-img-wrap">
<div class="inner-img-wrap">
<img src="http://placehold.it/64x64" />
</div>
</div>
</td>
此代码可以在表格单元格中生成居中的响应式图片,它们的宽度都相同,这正是我想要的。
我还希望以响应式方式使图片具有相同的高度。因此,我在页面上添加了此Javascript来更新填充。
function resizeImageElements()
{
var imageElements = $(".outer-img-wrap .inner-img-wrap img");
var imageElementsMaxHeight = -1;
imageElements.map( function(index) {
// compare the height of the img element
if( $(this).height() > imageElementsMaxHeight ) {
imageElementsMaxHeight = $(this).height();
}
} );
imageElements.map( function(index) {
var computeTopBottomPadding = ( imageElementsMaxHeight - $(this).height() ) / 2;
$(this).css( {
"padding-top": computeTopBottomPadding,
"padding-bottom": computeTopBottomPadding,
} );
} );
}
resizeImageElements();
问题是:我能否不使用Javascript代码,只使用CSS来实现相同的效果?
Fiddle链接:http://jsfiddle.net/ybkgLq4d/
max-width
,也可以指定最小或最大高度,以使事情变得更容易。 - gaitat