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来演示

当尺寸未知时，如何将图像放入div中

1 个答案: