私のウェブサイトでは、ユーザーが写真をアップロードできます。サイズはさまざまですが、同じ高さのボックスに収まるようにしておき、隣に置いてグリッドを作ることができます。画像は、縦横比を維持したままボックスの中央に配置する必要があります。 CSSでこれを行うことはできますか？私はフレックスボックスで物事を試してきましたが、私はそれを動作させることはできません。動的に読み込まれた画像の縦横比を保持する
高さが幅よりも大きい場合：
|-------------|
| imageim |
| ageimag |
| eimagei |
| mageima |
| geimage |
| imageim |
|-------------|
幅が高さよりも大きい場合：
|-------------|
| |
|imageimageima|
|geimageimagei|
|mageimageimag|
|eimageimageim|
| |
|-------------|
ここでは、5×5グリッド、スケーリング、ダウンロード可能、flexを使用しています。
.parent {
height: 100vh;
display: flex;
flex-wrap: wrap;
}
.parent a {
display: inline-block;
height: calc(20% - 2px);
width: calc(20% - 2px);
background: #ddd no-repeat center center;
background-size: contain;
margin: 1px;
}
.parent a:nth-child(odd) {
background-image: url(http://lorempixel.com/300/150/animals/3);
}
.parent a:nth-child(even) {
background-image: url(http://lorempixel.com/150/300/animals/3);
}<div class="parent">
<a href="http://lorempixel.com/300/150/animals/3" download="filename"></a>
<a href="http://lorempixel.com/150/300/animals/3" download="filename"></a>
<a href="http://lorempixel.com/300/150/animals/3" download="filename"></a>
<a href="http://lorempixel.com/150/300/animals/3" download="filename"></a>
<a href="http://lorempixel.com/300/150/animals/3" download="filename"></a>
<a href="http://lorempixel.com/150/300/animals/3" download="filename"></a>
<a href="http://lorempixel.com/300/150/animals/3" download="filename"></a>
<a href="http://lorempixel.com/150/300/animals/3" download="filename"></a>
<a href="http://lorempixel.com/300/150/animals/3" download="filename"></a>
<a href="http://lorempixel.com/150/300/animals/3" download="filename"></a>
<a href="http://lorempixel.com/150/300/animals/3" download="filename"></a>
<a href="http://lorempixel.com/300/150/animals/3" download="filename"></a>
<a href="http://lorempixel.com/150/300/animals/3" download="filename"></a>
<a href="http://lorempixel.com/300/150/animals/3" download="filename"></a>
<a href="http://lorempixel.com/150/300/animals/3" download="filename"></a>
<a href="http://lorempixel.com/150/300/animals/3" download="filename"></a>
<a href="http://lorempixel.com/300/150/animals/3" download="filename"></a>
<a href="http://lorempixel.com/150/300/animals/3" download="filename"></a>
<a href="http://lorempixel.com/300/150/animals/3" download="filename"></a>
<a href="http://lorempixel.com/150/300/animals/3" download="filename"></a>
<a href="http://lorempixel.com/150/300/animals/3" download="filename"></a>
<a href="http://lorempixel.com/300/150/animals/3" download="filename"></a>
<a href="http://lorempixel.com/150/300/animals/3" download="filename"></a>
<a href="http://lorempixel.com/300/150/animals/3" download="filename"></a>
<a href="http://lorempixel.com/150/300/animals/3" download="filename"></a>
</div>お返事ありがとうございます。ソリューションには欠点が1つあります。画像はダウンロードできません。サイトのセクションは一種のフォトブックとして機能するので、ユーザーが写真をダウンロードできるといいだろう。また、周囲のdivと一緒に画像を拡大したいので、幅と高さをピクセルではなく％で表現する必要があります。 5列5列のグリッドを作成しようとしています。私はJavaScriptでそれをやろうとする可能性がありますが、まずCSSソリューションがあるかどうか、フレックスボックスのような新しいレイアウトを使用しているかどうかを知りたいと思います。 – raichu
@raichu私の提案を提案で更新しました – LGSon
ありがとう！驚くばかり。私は午後中にフレックスボックスを使いこなしていました。:) – raichu
height: 100px;
width: auto;
これは、その高さに合わせて画像のサイズを変更します。
私はそれを試してみたが、それはうまくいきませんでした。多分私のdivの高さと幅が固定値の代わりに100％に設定されているからでしょうか？ – raichu
このポストを参照し、それが役立つ場合は回答してください。http://stackoverflow.com/q/34713763/483779しかし、ブラウザのサポートの詳細に注意してください。 – Stickers
あなたのために答えを投稿しましたが、あなたが探しているものをよりよく理解するために、画像サイズの組み合わせで予想されるレイアウトを示す画像が素晴らしいでしょう。 – LGSon