通过css使所有照片正方形 [英] Making all photos square via css

问题描述

我想把一系列的照片变成正方形照片。他们可能是水平矩形（即600x400）或垂直（400x600），但我想让他们是175x175两种方式。我的想法是最大高度或最大宽度的较小一边，不允许溢出超过175px的较大一边...但是，我有问题。

I'm trying to make a series of photos into square photos. They may be rectangular horizontally (i.e. 600x400) or vertically (400x600), but I want to get them to be 175x175 either way. My thought was to max-height or max-width the smaller side, and not allow overflow beyond 175px on the larger side...however, I'm having problems with it.

这是可能与css吗？

以下是我的尝试，但它仍然是矩形：

Below is my attempt, but it giving rectangles still:

<div style="min-height:175px; overflow:hidden; max-height:175px;">
<img style="min-width:175px; overflow:hidden; max-height:175px;" src="/photo.png">
</div>

推荐答案

我强烈建议NailThumb jquery插件期待这样做。它允许您创建方形缩略图而不失真。 http://www.garralab.com/nailthumb.php

I highly suggestion the NailThumb jquery plugin for anyone that is looking to do this. It allows you to create square thumbnails without distortion. http://www.garralab.com/nailthumb.php

这篇关于通过css使所有照片正方形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！