尺寸未知时如何将图像放入div答案

【问题标题】：How to fit the img into the div when dimentions unknown尺寸未知时如何将图像放入div
【发布时间】：2013-06-13 23:14:00
【问题描述】：

我有一个小 div（例如 200 像素 x 200 像素）和一些动态显示的图像：横向、纵向或全景尺寸（例如 600 像素 X 300 像素；200 像素 X 600 像素；2000 像素 X 300 像素）我需要使用 CSS 将它们全部放入我的 div 中。我有：

<div class="container">
 <img />
</div>

和 CSS

.container {
width: 200px;
height: 200px;
overflow:hidden
}
img.container {
min-height:100%;
min-width:100%;
}

但大图像会比 div 大得多。如果我将最大高度和最大宽度设置为 100% - 比我的图像上浆。基本上我需要保持更大的尺寸等于父 div 的 100%。并显示图像的一部分。没有 JS 怎么办？

【问题讨论】：

标签： image css-float css

【解决方案1】：

img.container

将选择带有容器类的任何 img 标签，但您的 html 没有任何标签。您的意思是使用：

.container img {

选择一个被容器类的元素包含的img？如果你设置：

.container img {
 width: 100%;
 height: auto;
}

图像的宽度应该适合 div，但高度可以更短，让 div 的一些背景可见；或更长，截断部分图像。

编辑：我认为没有 javascript 就无法实现您想要的确切效果。如果在页面就绪功能期间向 img 元素添加 onload 处理程序，则可以在其 src 更改时自动调整每个图像。这个 jquery sn-p 完成了：

$(function() {
        $(".container img").on('load',function() {
            if ($(this).height() > $(this).width()) {
                $(this).css('height','auto').css('width','100%');
            } else {
                $(this).css('height','100%').css('width','auto');
            }
        })
    })

这里有一个jsfiddle 来演示

【讨论】：

对，但我不需要背景可见。因此，如果高度超过 - 切断高度。如果宽度大于高度 - 切断宽度。
我不知道如何在没有分支的情况下做到这一点。应该有一个用于 css 的 calc 函数，但我不确定它是否/如何被支持。
calc 函数在最新的主流浏览器上运行得很好——但是我主要将它用于边距...这里看不到任何应用程序...
是否可以在容器上设置 max-height: 200px 而不是高度，这样当图像太短时 div 会缩小一点？
这就是问题所在——无论如何我都不想缩小图像——真的想保持初始比例