我该如何做这样的模块？

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>