我該如何做這樣的模塊？

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，瀏覽器將縮放圖像，使得寬高比保持不變，圖像很好地涵蓋了所有你把它放在元素。

現在讓所有的元素都是相同的大小，然後這個點就完成了。

創建一個同樣大小

這可以通過兩種方式來實現的模塊。

1. 在您的包裝箱上設置固定尺寸。
2. 使用更高級的CSS，特別是flexbox佈局模塊。

爲了簡單起見，我現在使用第一種方法。如果您對此感興趣，請在flex上閱讀！

對齊模塊在同一行

這可以以許多方式來實現，但最簡單的一個是設置display到inline-block。這將使模塊中的每個塊都被視爲一個塊，這意味着它可以有一個設定的寬度和高度。與此同時，它被排列成文本。所以，一個接一個的區塊就會簡單地走在同一條線上。當它不再適合屏幕時，塊將流向下一行。

把這一切放在一起。這是一個包含以上所有內容的快速玩具示例。它應該是一個很好的起點。

.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>