我该怎么做这样的模块？

Question

我正在尝试为我的网站活动做下面的方框但是我被卡住了。

我无法解决的问题：

• 将图像缩小为相同尺寸
• 创建相同大小的模块
• 对齐同一行中的模块

.background {
	width:360px;
	height:200px;
}
.image{
	width:100%;
	height:100%;
}
.text {
	width:100%;
	height:25%;
	color:#ffffff;
	background:blue;
	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，浏览器将缩放图像，以便保持纵横比，并且图像可以很好地覆盖您的所有元素把它放进去。

现在让所有元素都具有相同的大小和vo，这一点已经完成。

  

创建相同大小的模块

这可以通过两种方式实现。

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

您提供的代码和示例正在执行不同的操作。为了获得示例的效果，您需要多张“卡片”（图像和文字一起）。

您可以在display: flex div上使用.background，以便所有卡片的高度相同。然后你可以在卡上添加一些边距，这样它们就会分开一点。

.background {
  display: flex;
  background: cyan;
}
.card {
  width: 360px;
  background: white;
  margin: 10px;
}
.text {
  padding: 0 5px;
}
.text p {
	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>