我正在尝试将一系列照片制作成方形照片。它们可能是水平矩形(即 600x400)或垂直矩形(400x600)，但无论哪种方式，我都想让它们成为 175x175。我的想法是在较小的一侧使用 max-height 或 max-width，并且在较大的一侧不允许超过 175px 的溢出...但是，我遇到了问题。
这可以用 css 实现吗？
下面是我的尝试，但它仍然给出矩形:
<div style="min-height:175px; overflow:hidden; max-height:175px;">
<img style="min-width:175px; overflow:hidden; max-height:175px;" src="/photo.png">
</div>
最佳答案
您可以设置父div的宽度/高度，然后将子img标签设置为width:100%；高度:自动；
这将缩小图像以尝试在考虑宽高比的情况下适应父级。
您还可以将图像设置为 div 上的背景图像 然后，如果您可以使用 css3，则可以弄乱 background-size 属性。 它的属性有:contain, cover, or a specified height (50%, 50%) (175px, 175px) 您也可以尝试使用 background-position 将图片居中
<div style="background-image:url(some.png); background-size: cover; background-position: 50%">
关于image - 通过CSS使所有照片成为方形，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13518833/