http://hbnam.tumblr.com/画像の配列が与えられていると、どのように画像をスタイル付けしてこのように見えるのですか？
このウェブサイトでは、グリッド内の画像が表示されます。グリッドは完全にランダムに表示されますが、さらに検討すると、ページが自動で表示され、画像はそれぞれ15ブロックずつ表示されます。しかし、各ブロックはまだ完全に異なっています。
私は画像の配列を持っていると私は
array.map((element, index) => (
<div **STYLES**>
<img key={index} src={element} />
</div>
)
のようなものの、適切なスタイリングで何かをしたいです。
スタイリングの手掛かりはありますか？
スタイリングの面だけに興味がある場合は、要素を調べてください。レイアウトのような「グリッド」が各画像の高さに設定されていることを達成するためにやっていることはすべて、<body>タグを中心にtext-align: centerを使用して表示されていることがわかります。
問題は、あなたのコード例では、<div>のデフォルト値はdisplay: blockです。そのtumblrページでは、それぞれの画像はのデフォルトのタグで囲まれているので、<div>を引き続き使用して各画像をラップするには、style小物をstyle={{display: 'inline'}}に設定し、text-align: centerを親要素はdiv /画像の配列をラップします。
私はこれがあなたに役立つことを願っています。
const Images = ({images}) => {
const wrapperStyle = {
textAlign: 'center'
};
const imageStyle = {
display: 'inline'
};
return (
<div style={wrapperStyle}>
{images.map((image, index) => (
<div style={imageStyle}>
<img key={index} src={image} height="300" />
</div>
));}
</div>
);
};
画像が行に並んでいることがわかります。各行は「ランダムに」1,2,3の画像を持っています。そしてあなたは言いました、画像は一度に15得られます。 15枚の画像を表示するとどうでしょうか？各行の画像は以下のように設定されています（数字は15までです）。
2、3、1、2、1、3、2、1
センター画像と同じ高さ、知覚されるランダムに追加するアスペクト比に基づいて、幅autoにすべての画像を設定します。
私はコードを理解することができますが、私が助けることができるかどうか教えてください。