获取图像里面的div - 高度：自动和最大高度

我得到一个图像里面div与未知宽度和高度。我想要有一个最大的图像宽度或高度 - 类似background-size: contain。获取图像里面的div - 高度：自动和最大高度

这里是我的源代码：

CSS

.box { 
    display: block; 
    position: fixed; 
    height: auto; 
    bottom: 0; 
    top: 0; 
    left: 0; 
    right: 0; 
    margin-top: 50px; 
    margin-bottom: 50px; 
    margin-right: 80px; 
    margin-left: 80px; 
    background-color: white; 
    border: solid 2px blue; 
} 

.box img { 
    max-width: 100%; 
    max-height: 100%; 
}

HTML

<div class="box"> 
<img src="myimage.jpg"> 
</div>

最大宽度运作良好，但最大高度不工作。

来源

2013-02-02 Tomas Nekvinda

我不完全理解你想达到的目标。你想让图片永远在div里面吗？然后只是给溢出：隐藏;到.box类。另外，删除高度：auto;来自.box类。 – pentzzsolt

您只能设置宽度或高度。如果您设置宽度，高度将相应地调整。浏览器无法更改图像的'widthxheight'比例。如果图片实际上是200x800，并且您将宽度设置为100，那么高度将自动为400. –

[CSS：100％宽度或高度，同时保持宽高比？]可能重复（http://stackoverflow.com/questions/3751565/css-100-width-or-height-while-keeping-aspect-ratio） – easwee

你想要的只有CSS才能实现。

有JS插件在那里为你做这个。寻找imgscale这是一个jQuery插件，尽管它需要一些调整，但有一个很好的基础。

这里是我修改的一个拷贝链接：http://www.dtavares.com/imgscale/js/jquey.imgscale.js

你可以称其为：

$(".someConainer img").imgscale({parent: '.someConainer', scale: 'fit', center: true, fade: 0});

来源

2013-02-02 15:47:59 rcdmk

获取图像里面的div - 高度：自动和最大高度

回答

相关问题