0

我有一个小 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 我该怎么做？

4

1 回答 1

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

于 2013-06-17T21:52:10.607 回答