垂直居中可变高度图像，同时保持最大宽度/高度

小编典典

垂直居中可变高度图像，同时保持最大宽度/高度

css

我想在页面上居中放置宽度/高度未知的图像，同时确保它比页面大时会缩小（即使用max-width/ max-height）。

我尝试使用该display:table-cell方法，但是max- width在Firefox中，对于用声明的元素中的所有元素均被忽略display:table- cell。有没有办法在不使用高度的情况下垂直居中可变高度元素display:table-cell？

我可以更改标记。JavaScript是可以接受的，但是我不能使用JQuery（或任何其他JS库）。

阅读 253

2020-05-16

共1个答案

小编典典

这应该证明可以很好地工作…不需要JavaScript :)

CSS

/* Don't Change - Positioning */
.absoluteCenter {
 margin:auto;
 position:absolute;
 top:0;
 bottom:0;
 left:0;
 right:0;
}

/* Sizing */
img.absoluteCenter {
 max-height:100%;
 max-width:100%;
}

HTML

<img class="absoluteCenter" src="PATHTOIMAGE">

注意： 此类可以很容易地用于任何事情。如果你用这个不是像其他的东西，一定要添加TAG.absoluteCenterCSS规则与max-height和max-width您选择的（这里TAG是你使用[例如HTML标记div.absoluteCenter]和max- width/max-height小于100%）。

2020-05-16