或者我认为这很容易。我想保持简单,所以它适用于所有浏览器,所以没有Javascript。但是现在我最终得到了这个CSS,它可以在Chrome / Safari / iOS中运行,但不能在Internet Explorer中使用,而且在Android上似乎表现得很奇怪:
img {
max-width: 100%;
max-height: 80vh;
-o-object-fit: contain; /* These lines prevent distortion on Chrome/Safari */
object-fit: contain;
width: 2000px; /* This seems to be needed to make small images bigger, but creates distortion on IE */
}
基本的想法是拥有最简单的画廊,可以在手机和普通浏览器上使用。这个想法是图像不应该大于视图高度的80%,并且不应超过宽度的100%。但仍然占用尽可能多的空间并仍然保持其纵横比。
80%观点背后的想法是每个人都注意到有多张图片。
页面/内容仅包含<img><br/>
个标签,其中包含不同大小和尺寸的图片。什么都没有。
使用简单的最大宽度/最大高度这似乎已经奏效,除了小图片永远不会变大。
如何让它在所有浏览器上运行?这个简单的问题有一个简单的CSS答案吗?
编辑:添加了复制网站:http://seweso.com/35225404/
Edit2:看起来像object-fit:contains;不适用于Internet Explorer。这是不幸的,因为它完全符合我的需要。