响应图像全屏和居中 - 保持宽高比,不超过窗口 [英] Responsive Image full screen and centered - maintain aspect ratio, not exceed window
本文介绍了响应图像全屏和居中 - 保持宽高比,不超过窗口的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
所以我想要显示 img
- 无作品
- 没有扭曲或伸展(原始长宽比)
- 垂直和水平居中
- as big as possible (filling the width when it is landscape / height when it is portrait)
- no crop
- no skew or stretch (original aspect ratio)
- centred both vertically and horizontally
此外,图片的原始大小未知。
Also, the image's original size is not known.
我已经尝试了很多不同的选项,包括一个flexbox一个(获得垂直中心),但没有什么似乎打勾所有的框。
I've tried quite a few different options for this, including a flexbox one (to get the vertical center), but nothing seems to tick all the boxes.
理想情况下,我希望这是一个全CSS解决方案,但我一直在寻找一些JS。
Ideally I'd like this to be an all CSS solution of course, but I have been looking into some JS as well.
感谢
推荐答案
jsFiddle Demo
您可以使用此处显示的技术:绝对居中。
To center it, you can use the technique shown here: Absolute centering.
为了使它尽可能大,给它 max-width
和 max-height
of 100%
。
To make it as big as possible, give it max-width
and max-height
of 100%
.
.className {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
max-width: 100%;
max-height: 100%;
margin: auto;
overflow: auto;
}
这篇关于响应图像全屏和居中 - 保持宽高比,不超过窗口的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文