在网页上,我正在渲染图像集.有些图像是纵向,有些是横向,都比所需的渲染尺寸大.
我想在一个整齐,大小合适的方形缩略图库中显示这些图像.
我怎么能这样只使用CSS？
如果可能的话,我想避免使用JavaScript库.我不需要选择要显示的图像的一部分,只需选择任何中心方形区域.
我已经在其他地方看到过这个问题,但还没有找到一个似乎适用于所有方向的答案(例如,肖像可能会被正确裁剪/调整大小,而景观则没有).
您仍然可以使用服务器端技术通过cURL调整图像大小; 然而,这既不是在这里也不是在那里.有一点需要理解,CSS并不是一种真正的编程语言,因为它无法做出决策或做任何真正的数学运算,所以我们不能只用CSS做出动态决策.
话虽这么说,你可以为你的画廊创建div,并使用CSS将背景图像设置为所需的图像.在CSS3中有一个叫做的属性background-size.您可以手动设置像素大小,但不会保持纵横比,因此可能看起来很糟糕.设置background-size: cover将缩放图像,使其完全填充背景区域,同时切除多余部分.设置background-size: contain将缩放图像,使其保持原始宽高比并填充背景而不会切断图像.这是一个小代码,解释了如何使用它.的jsfiddle
编辑:我忘了提到这个解决方案只适用于IE9 +(应该在FF,Chrome和Safari中正常工作)