Question

我在div中获得了一个未知宽度和高度的图像。我想要一个最大宽度或高度的图像 - 类似于background-size: contain。

这是我的源代码：

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>

最大宽度效果很好，但最大高度不起作用。

Answer 1

只有CSS才能实现您的目标。

有一些JS插件可以帮到你。寻找imgscale这是一个jQuery插件，虽然它需要一些调整，但有一个很好的基础开始。

这是我修改过的一个副本的链接：http://www.dtavares.com/imgscale/js/jquey.imgscale.js

您可以将其命名为：

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

在div中获取图像 - 高度：自动和最大高度

1 个答案: