如何创建3个图像全尺寸框响应

Question

我的问题是如何创建3个图像全尺寸可链接框响应

请告知，使用什么框架？

Answer 1

我们通常不会在这里做你的工作，但我做了一个例外，并希望这是你的解决方案：

＆＃13;

＆＃13;

html,
body {
  height: 100%;
}

body {
  display: flex;
  align-items: stretch;
  align-content: stretch;
}

body>div {
  flex-grow: 1;
  height: 100%;
  width: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  text-align: center;
  display: table;
}

body>div>h1 {
  vertical-align: middle;
  display: table-cell;
}

@media (max-device-width: 20cm) {
  body {
    flex-direction: column;
  }
  body>div {
    height: 33%;
  }
}

＆＃13;

<div style="background-image:url(https://loremflickr.com/300/200)">
  <h1>Text</h1>
</div>
<div style="background-image:url(https://loremflickr.com/300/200)">
  <h1>Text</h1>
</div>
<div style="background-image:url(https://loremflickr.com/300/200)">
  <h1>Text</h1>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

对于如此简单的设置，您可以为每个图像指定33.33%的宽度百分比。

div {
color: rgb(255, 255, 255);
font-weight: bold;
text-align: center;
line-height: 180px;
}

img {
float: left;
width: 33.33%;
height: 180px;
}

img:nth-of-type(1) {
background-color: rgb(127, 0, 0);
}

img:nth-of-type(2) {
background-color: rgb(127, 127, 0);
}

img:nth-of-type(3) {
background-color: rgb(0, 63, 0);
}

<div class="image-box">
<img src="" alt="Image 1" />
<img src="" alt="Image 2" />
<img src="" alt="Image 3" />
</div>

Answer 3

您可以使用bootstrap的col-md-4属性作为响应部分，并在链接标记中插入所需的链接。 我希望它会对你有所帮助。