我想要找到的是一些神奇的HTML标记和CSS规则
>允许图像包含在正常的< img>分子
>确保缩略图适合他们的200×150像素框,保持其比例,并以其溢出的任何维度为中心.
>不需要JavaScript或每个图像的实际尺寸的具体知识
我不知道这是否可行.我可以用以下标记对我想要的(坏)近似：
<div class="thumb">
<img src="360x450.jpeg">
</div>
和CSS：
.thumb {
width: 200px;
height: 150px;
overflow: hidden;
}
.thumb img {
min-width: 200px;
min-height: 150px;
width: 200px;
}
这种尝试以各种方式突破：
>纵向方向的图像将被正确调整大小,但会溢出到容器的底部,导致垂直偏离中心的裁剪.
>由于硬编码的宽度和最小高度规则,宽和短的图像将在水平尺寸上扭曲.
>但是没有硬编码的宽度,大于最小高度和宽度的图像根本不会调整大小.
如果这是有帮助的,我已经举了一个例子,希望(希望)说明我在做什么,在这里：
> http://overloaded.org/tmp/imgtest/
> http://overloaded.org/tmp/imgtest/imgtest.zip
我知道我可以通过省略< img>来解决这个问题.而是将缩略图作为集中的背景图像拉在包含元素上,但如果可能,我想保留< img>页面中的元素.
感谢您提供的任何帮助或指导！
编辑：我想我应该注意到一个理想的解决方案将适用于IE 6和现代浏览器,但任何适用于IE 9和其他现代浏览器(最近的WebKit,Gecko等)的解决方案都将受到欢迎.
解决方法
此外,可能不是最好的主意.你在这里克服的大问题是缩略图的方向.如果您正在处理全景照片怎么办？当然,缩小它将会形成一个非常不雅观的“压缩”形象,像一个非常高的形象.所有人都很少在100％的时间内以4X3或16X9进行交易.所以,你需要一个机制来填补图像.即使这个比例是正确的,也不会像Photoshop或Gimp这样的程序尽可能地调整大小.
这个思想过程中的另一个主要问题是,您将通过较大的图像向服务器发送大量不必要的数据.加载后需要更长时间,不必要地填充DOM,并且总体上只是抑制UI体验.
有很多方法可以解决这个问题,没有一个是纯CSS.我已经解决了这几次,每个都以一种独特的方式基于客户端.对于一个想要完全自定义的客户端,它是一个自定义上传器,通过iMagick(图像魔术的一部分)调整大小,以及具有主要交互性的专辑的自定义CSS / Javascript.在另一种情况下,我使用Gallery作为后端 – 处理缩略图创建,上传,标题,裁剪和组织 – 然后将重新格式化的图像链接从DB中拉出来,以更具吸引力的方式显示它们.您可以节省更多的麻烦,只需使用像Flickr api这样的图像来提取图像供您使用.
