どうすればこのようなモジュールを作成できますか？

Question

私のウェブサイトのイベントには以下のようなボックスを作ろうとしていますが、私は立ち往生しています。

問題私が解決することはできません。

• が同じ行にモジュールを合わせ
• は、同じサイズのモジュールを作成し、同じ大きさに画像を削減

.background { 
 
\t width:360px; 
 
\t height:200px; 
 
} 
 
.image{ 
 
\t width:100%; 
 
\t height:100%; 
 
} 
 
.text { 
 
\t width:100%; 
 
\t height:25%; 
 
\t color:#ffffff; 
 
\t background:blue; 
 
\t z-index: auto; 
 
}

<div class="background"> 
 
<div class="image"> 
 
    <img src="https://zero.eu/content/uploads/2017/01/Ryley_Walker-730x490.jpg" width="360" height="200" class="wp-image-156 hoverZoomLink" alt="Willie Peyote Live"> 
 
</div> 
 
<div class="text"> 
 
    <p>test test test</p> 
 
</div> 
 
</div>

Answer 1

質問...と回答。あなたが一つ一つ持っている問題を見て行きましょう。

それは、CSSはこのの世話を聞かせするのが最善です同じサイズ

に画像を縮小します。要素の背景を目的の画像に設定し、background-sizeをcoverに設定すると、ブラウザは画像の縮尺を調整し、縦横比が維持され、画像が配置された要素のすべてをうまく網羅します。

今、すべての要素を同じサイズと声で作ってください。この点は完了です。

これは2つの方法で達成することができ、同じサイズのモジュール

を作成します。

1. ボックスに固定サイズを設定します。
2. より高度なCSS、特にflexboxレイアウトモジュールを使用してください。

簡単にするために、私は今、最初のアプローチを使用します。あなたがそれに興味を持っているならば、フレックスを読んでください！

これは、多くの方法で達成することができますが、最も簡単な1がinline-blockにdisplayを設定されているのと同じラインでモジュール

を合わせます。これにより、モジュール内のすべてのブロックが、ブロックとして扱われるようになります。つまり、ブロックの幅と高さを設定できます。同時に、それはテキストのように配置されます。だから、次のブロックは同じ行に進むだけです。それがもう画面に収まらない場合、ブロックは次の行に流れます。

これをすべてまとめます。ここには、上記のすべてを含むすばらしいおもちゃの例があります。これは、構築するのに適した出発点となるはずです。

.card { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    width: 150px; 
 
    height: 270px; 
 
    margin: 10px; 
 
    padding: 0; 
 
    border: 1px solid #444; 
 
    border-radius: 5px; 
 
} 
 

 
.image { 
 
    /* width is 100%, so 150px, by default */ 
 
    height: 150px; 
 
    background-size: cover; 
 
} 
 

 
.text { 
 
    height: 150px; 
 
    margin-top: -40px; 
 
} 
 
.text > p { 
 
    max-height: 90px; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
} 
 

 
h1 { 
 
    margin: 0; 
 
    padding: 10px; 
 
    background: rgba(0, 0, 0, 0.7); 
 
    color: #eee; 
 
    font-size: 20px; 
 
    line-height: 20px; 
 
} 
 

 
p { 
 
    margin: 0; 
 
    padding: 10px; 
 
    font-size: 15px; 
 
    line-height: 20px; 
 
}

<div class="card"> 
 
    <div class="image" 
 
     style="background-image: url('http://lorempixel.com/150/150/abstract/');"></div> 
 
    <div class="text"> 
 
    <h1>Foo</h1> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec faucibus auctor odio, sed lobortis odio pellentesque tincidunt. Curabitur et libero maximus, consequat mi non, dignissim turpis.</p> 
 
    </div> 
 
</div> 
 
<div class="card"> 
 
    <div class="image" 
 
     style="background-image: url('http://lorempixel.com/150/150/city/');"></div> 
 
    <div class="text"> 
 
    <h1>Bar</h1> 
 
    <p>Sed ac lacus vel mi mollis ullamcorper quis ac sapien. Ut quis ornare ligula. Nullam a sapien eget arcu mattis aliquam. Quisque dapibus leo vel lacus rutrum sollicitudin.</p> 
 
    </div> 
 
</div> 
 
<div class="card"> 
 
    <div class="image" 
 
     style="background-image: url('http://lorempixel.com/150/150/cats/');"></div> 
 
    <div class="text"> 
 
    <h1>Baz</h1> 
 
    <p>Nullam eu urna dictum, gravida augue nec, dignissim enim. Duis sit amet elit quis mauris consectetur rhoncus et a ipsum. Fusce vel sagittis nulla, et imperdiet quam.</p> 
 
    </div> 
 
</div>

Answer 2

正しく動作するようにHTMLとCSSを変更する必要があります。

<div class="background"> 
    <div class="image" style="background-image: url('https://zero.eu/content/uploads/2017/01/Ryley_Walker-730x490.jpg');"> 
    </div> 
    <div class="text"> 
      <p>test test test</p> 
    </div> 
</div> 

その後、あなたのCSSは次のようになります。

.background { 
    width: 360px; 
    height: 200px; 
    position: relative; 
} 

.image { 
    background-size: cover; /* that will keep the image in original ratio */ 
    background-position: center center; 
    height: inherit; 
} 

.text { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    height: 25%; 
} 

完全にバックグラウンドのスペースをカバーするイメージを作成し、その後.textは、画像上のオーバーレイされること。実際には.image divをスキップして、背景とCSSを.background divに追加することもできます。これも同様に機能します。

あなたが提供している例は、あなたのコードが示唆しているものとは異なるものです。例を見ておきたい場合は、

.background { 
    width: 360px; 
    height: 200px; 
    position: relative; 
    background: #fff; 
} 

.image { 
    background-size: cover; /* that will keep the image in original ratio */ 
    background-position: center center; 
    position: relative; 
} 

.image:before { 
    content: ""; 
    display: block; 
    padding-top: 60%; /* that will make a fixed ratio of you image box, even if you'll scale the background boc /* 
} 

.text { 
    /* actually it doesn't need styling in that case */ 
} 

.background's parent { 
    display: flex; /* to make the blocks even in height without setting that as a fixed value */ 
} 

Answer 3

あなたのコードと入力した例は、異なる処理を行っています。あなたの例の効果を得るには、複数の「カード」（イメージとテキストを一緒に）が必要です。

.background divでdisplay: flexを使用すると、すべてのカードの高さが同じになるようにすることができます。次に、カードにいくらかのマージンを加えて少しずつ分けることができます。

.background { 
 
    display: flex; 
 
    background: cyan; 
 
} 
 
.card { 
 
    width: 360px; 
 
    background: white; 
 
    margin: 10px; 
 
} 
 
.text { 
 
    padding: 0 5px; 
 
} 
 
.text p { 
 
\t width:100%; 
 
    overflow: hidden; 
 
}

<div class="background"> 
 
    <div class="card"> 
 
    <img src="https://zero.eu/content/uploads/2017/01/Ryley_Walker-730x490.jpg" width="360" height="200" class="wp-image-156 hoverZoomLink" alt="Willie Peyote Live"/> 
 
    <div class="text"> 
 
    <p>test test test</p> 
 
    </div> 
 
</div> 
 
    
 
    <div class="card"> 
 
    <img src="https://zero.eu/content/uploads/2017/01/Ryley_Walker-730x490.jpg" width="360" height="200" class="wp-image-156 hoverZoomLink" alt="Willie Peyote Live"/> 
 
    <div class="text"> 
 
     <p>another test</p> 
 
    </div> 
 
    </div> 
 
    
 
    <div class="card"> 
 
    <img src="https://zero.eu/content/uploads/2017/01/Ryley_Walker-730x490.jpg" width="360" height="200" class="wp-image-156 hoverZoomLink" alt="Willie Peyote Live"/> 
 
    <div class="text"> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque hendrerit, massa sed tristique lacinia, mauris lectus ultricies ipsum, vitae lobortis lectus arcu quis nisl. Etiam pulvinar porttitor mi, at aliquet quam mattis non.</p> 
 
    </div> 
 
    </div> 
 
</div>