通過CSS使所有照片成為正方形 - Making all photos square via css -开发者知识库

通過CSS使所有照片成為正方形 - Making all photos square via css -开发者知识库,第1张

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.

我正在嘗試將一系列照片制作成方形照片。它們可以是水平矩形(即600x400)或垂直(400x600),但我希望它們在任何一種情況下都是175x175。我的想法是最小高度或最大寬度較小的一側,並且不允許溢出超過175px在較大的一側......但是,我遇到了問題。

Is this possible with css?

這可能與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="/img.php?pic=/photo.png">
</div>

5 个解决方案

#1


25  

You can set the width/height of the parent div then set the child img tag to width:100%; height: auto;

您可以設置父div的寬度/高度,然后將子img標記設置為width:100%;身高:自動;

That will scale the image down to try to fit the parent with aspect ratio in mind.

這將縮小圖像以嘗試使父母考慮寬高比。

You can also set the image as a background-image on the div Then if you can use css3 you can mess with the background-size property. It's attributes are: contain, cover, or a specificed height (50%, 50%) (175px, 175px) You could also try to center the picture with background-position

您還可以將圖像設置為div上的背景圖像然后,如果您可以使用css3,則可以使用background-size屬性。它的屬性是:包含,封面或特定高度(50%,50%)(175px,175px)您還可以嘗試將圖片置於背景位置的中心位置

<div style="background-image:url(some.png); background-size: cover; background-position: 50%">

最佳答案:

本文经用户投稿或网站收集转载,如有侵权请联系本站。

发表评论

0条回复