简单的响应式垂直图库,80%viewheight / 100%宽度

时间:2016-02-05 13:27:04

标签: css

或者我认为这很容易。我想保持简单,所以它适用于所有浏览器,所以没有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。这是不幸的,因为它完全符合我的需要。

0 个答案:

没有答案