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

Question

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

Answer 1

私は非常にこの目的を探している人のためのjailのプラグインをNailThumb提案します。歪みのない正方形のサムネイルを作成することができます。 http://www.garralab.com/nailthumb.php

Answer 2

あなたは幅の子imgタグ設定し、親のdivの幅/高さを設定することができます：100％;高さ：自動;

アスペクト比を考慮して画像を縮小します。

の背景イメージとしてイメージを設定することもできます。次にcss3を使用できる場合は、background-sizeプロパティを混乱させることができます。 、含まれているカバー、または次の特定の高さ（50％、50％）（175px、175px） ます。また、これは役立つかもしれないのbackground-position

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

Answer 3

で画像を中央に試みることができる： それは属性があります。

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を入力するだけです。

Answer 4

わかりました。

それが遅すぎるかどうか分かりませんが、正方形のサムネイルを作成する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 
    } 

最も重要なことは、幅と高さとオーバーフローしている：隠されました。これを動作させるために左に浮動小数点演算は必要ありません。

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

ランドスケープイメージ宣言（.landscape img）の場合、高さは175pxに固定されています。これは元の高さのサイズを変更し、幅はautoに設定され、元の幅はサイズ変更されますが、ここでは175pxです。そのため、幅を四角形に塗りつぶすのではなく、四角形を塗りつぶすだけで幅の余分なビジュアル情報（オーバーフロー）がオーバーフロー：hiddenで隠されます。

これはポートレートと同じように機能し、幅と高さが切り替えられ、高さは自動で幅は175pxです。基本的には、いずれの次元でも、他の次元を超える次元はautoに設定されます。そのため、大きな次元は、設定されたサムネイルの次元（175px x 175x）の外にオーバーフローすることがあります。

例：5pxの白いマージンなどのマージンを追加する場合は、borderプロパティを使用できます。そうしないと、情報がオーバーフローする余白がなくなります。

希望はこれが理にかなっています。

Answer 5

イメージの幅と高さ、イメージのアクティブなポートレートまたはランドスケープクラスを決定します。肖像画の場合{height:175px; width:auto}。ランドスケープの場合は、高さと幅を逆にします。