适合img in div容器

sqr*_*ept 0 javascript css jquery css3

使用CSS2和JS模拟即将推出的CSS3对象适配属性的最佳方法是什么?我对包含和覆盖方法感兴趣.

编辑:在CSS3中有这里描述的新的对象适应机制:http://dev.opera.com/articles/view/css3-object-fit-object-position/但是在Opera之外还不支持object-fit浏览器.要创建可移植的解决方案,我需要img增大或缩小到其父级的大小,div而不会失去图像的原始宽高比.这可以通过包含整个图像(技术也称为信箱)或通过放大和溢出图像直到最小尺寸与尺寸匹配div(技术也称为覆盖)来实现.有一些jquery imagefit库,因为它们非常多(可能它们仅在特定浏览器的特定情况下工作).

编辑2:那些花时间阅读它的人已经理解了这个问题,已经提出了一个很好的答案,并给出了答案.很难理解关闭它的决定.

Mr.*_*ien 5

为什么要使用JavaScript或CSS3的东西?只是使用它,你很高兴

演示

img {
   max-width: 100%;
   max-height: 100%;
}
/* This will resize you image according to the container size and 
   will retain the aspect ratio too */
Run Code Online (Sandbox Code Playgroud)

  • 但你的问题是这个'适合img in div容器',如果你仍然需要一个完整的页面背景检查,http://css-tricks.com/perfect-full-page-background-image/,仍然不是什么你正在寻找而不是抱歉no1了解你的问题可能...... (2认同)