image - 尺寸未知时如何将图像放入div

Question

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

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

和CSS

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

但是大图像会比 div 大得多。如果我将 max-height 和 max-width 设置为 100% - 那么我的图像就会变硬。 基本上我需要保持更大的尺寸等于父 div 的 100%。并显示图像的一部分。没有 JS 我该怎么做？

Answer 1

img.container 

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

.container img {

选择包含在具有容器类的元素中的 img？ 如果你设置:

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

图像宽度应适合 div，但高度允许更短，让部分 div 的背景可见；或更长的时间，切断一些图像。

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

$(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演示