web-dev-qa-db-ja.com

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

一連の写真を正方形の写真にしようとしています。それらは水平（600x400）または垂直（400x600）の長方形かもしれませんが、どちらにしても175x175にしたいです。私の考えは、小さい側を最大高さまたは最大幅にし、大きい側で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>
cssimagecss3shape
16
user749798

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

これにより、アスペクト比を考慮して親に合わせて画像が縮小されます。

また、divで画像を背景画像として設定することもできます。css3を使用できる場合は、background-sizeプロパティを台無しにできます。属性は次のとおりです：含む、カバー、または特定の高さ（50％、50％）（175px、175px）背景位置で画像を中央に配置することもできます

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

わかりました。

手遅れかどうかはわかりませんが、正方形のサムネイルを作成する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に設定され、オーバーフローは非表示に設定されます。つまり、175pxの正方形を含む視覚情報よりも大きい視覚情報は表示されなくなります。

ランドスケープイメージの宣言（.landscape img）の場合、高さは175pxに固定され、元の高さをサイズ変更し、幅はautoに設定されます。これは、元の幅をサイズ変更します。この場合、175pxです。したがって、幅を正方形に押し込むのではなく、正方形を塗りつぶし、幅内の余分な視覚情報（つまりオーバーフロー）はoverflow：hiddenで非表示になります。

縦と横で同じように機能しますが、幅と高さが切り替わります。高さは自動で、幅は175pxです。基本的にそれぞれの場合、他の寸法を超える寸法はすべてautoに設定されます。これは、設定されたサムネイル寸法（175px x 175x）の外側でより大きな寸法がオーバーフローするためです。

また、親指の間にマージン（たとえば5pxの白いマージン）を追加する場合は、borderプロパティを使用できます。それ以外の場合、情報があふれているマージンはありません。

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

4
Peter

画像の幅と高さを決定してから、画像のアクティブなポートレートまたはランドスケープクラスを決定します。ポートレートを行う場合{height:175px; width:auto}。横向きの場合、高さと幅を逆にします。

0
technoarya