image - CSSですべての写真を正方形にする

Question

一連の写真を正方形の写真にしようとしています。それらは、水平方向 (つまり 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>

score 28 · Accepted Answer

親 div の幅/高さを設定してから、子 img タグを width:100%; に設定できます。高さ: 自動;

これにより、縦横比を考慮して親に合うように画像が縮小されます。

画像を div の background-image として設定することもできます。次に、css3 を使用できる場合は、background-size プロパティをいじることができます。属性は次のとおりです。contain、cover、または特定の高さ (50%、50%) (175px、175px) background-position で画像を中央に配置することもできます

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

score 4 · Accepted Answer

わかりました、これを手に入れました。

手遅れなのか何なのかわかりませんが、正方形のサムネイルを作成する 100% 純粋な CSS の方法を思いつきました。それは私がかなり長い間解決策を見つけようとしてきたことであり、運がありませんでした. いくつかの実験で、私はそれを機能させました。使用する主な 2 つの属性は、OVERFLOW:HIDDEN と WIDTH/HEIGHT:AUTO です。

さて、ここで何をすべきか：

さまざまな形とサイズの画像のバッチがあり、横長のものも縦長のものもあるとしますが、もちろんすべてが長方形です。最初に行うことは、クラスセレクターを使用して、画像リンク (サムネイル) を縦向きまたは横向きに分類することです。では、簡単にするために 2 つのサムネイルを作成したいとしましょう。あなたが持っている：

img1.jpg (縦) および img2.jpg (横)

HTML の場合、次のようになります。

<a class="portrait" href="yoursite/yourimages/img1.jpg"><img src="yoursite/yourimages/img1.jpg /></a>
<a class="landscape" href="yoursite/yourimages/img2.jpg"><img src="yoursite/yourimages/img2.jpg /></a>

したがって、この時点ではまだ css がないため、上記のコードは同じフルサイズの画像にリンクするサムネイルとしてフルサイズの画像を提供します。そうです、これが縦向きと横向きの両方のcssです。それぞれに 2 つの宣言があります (リンクとリンクの画像)。

.landscape {
        float:left;
        width:175px;     
        height:175px;    
        overflow:hidden;    
    }

.landscape  img{
        width:auto;
        height: 175px;   
    }

.portrait {
        float:left;
        width:175px;
        height:175px;
        overflow:hidden;    
    }

.portrait img {
        width:175px;    <-- notice these
        height: auto;   <-- have switched
    }

最も重要なことは、幅と高さ、およびoverflow:hiddenです。これが機能するためにフロート左は必要ありません。

ランドスケープサムネイル宣言 (.landscape) では、バウンディングボックスは 175 x 175 に設定され、オーバーフローは非表示に設定されます。つまり、175 ピクセルの正方形を含むものよりも大きな視覚情報は表示されなくなります。

横向きの画像宣言 (.landscape img) の場合、高さは 175px に固定され、元の高さのサイズが変更され、幅は auto に設定され、元の幅のサイズが変更されますが、境界の正方形に関連するポイントのみに設定されます。この場合は 175px です。したがって、幅を正方形に押しつぶすのではなく、単純に正方形を塗りつぶし、幅内の余分な視覚情報 (つまり、オーバーフロー) は、overflow:hidden で隠されます。

縦向きでも同じように機能しますが、幅と高さが入れ替わっているだけで、高さは auto で幅は 175px です。基本的に、いずれの場合も、他のサイズを超えるサイズはすべて auto に設定されます。これは、サイズが大きいほど、設定されたサムネイルのサイズ (175px x 175x) の外にオーバーフローするためです。

また、サム間にマージンを追加する場合、たとえば 5 ピクセルの白いマージンを追加する場合は、border プロパティを使用できます。そうしないと、情報がオーバーフローするマージンがなくなります。

これが理にかなっていることを願っています。

score 0 · Accepted Answer

画像の幅と高さを決定してから、画像のアクティブな縦または横のクラスを決定します。肖像画なら{height:175px; width:auto}。横向きの場合は、高さと幅を逆にします。

score -4 · Accepted Answer

これを行おうとしている人には、NailThumb jquery プラグインを強くお勧めします。歪みのない正方形のサムネイルを作成できます。 http://www.garralab.com/nailthumb.php

score -7 · Accepted Answer

これは役立つかもしれません。

CSS:

.image{
-moz-border-radius: 30px; /* FF1+ */
-webkit-border-radius: 30px; /* Saf3-4 */
border-radius: 30px; /* Opera 10.5, IE 9, Saf5, Chrome */
}

HTML:

<div class="image"></div>

これは私にとってはうまくいきました。div内の画像へのURLを入れるだけです。

image - CSSですべての写真を正方形にする

7 に答える 7

Related

Reference