Question

我尝试将四张不同尺寸的照片放在一行中。有点像this.

无论如何，我到目前为止已经把所有东西连在同一个高度上，尽管有些照片可能会拉得太多，但没关系。

但是现在我也希望它具有响应性，所以如果我减小浏览器的大小，图片应该变小，但它们不会。

请帮助，这是我到目前为止写的。

＆＃13;

.frontpageinspire {
  max-width: 100%;
  margin: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  align-content: stretch;
}

.top8 {
  height: 300px;
  padding: 10px 5px 10px 5px;
  flex-grow: 1;
  flex-shrink: 1;
  align-self: center;
}

＆＃13;

<div class="frontpageinspire">
  <img class="top8" id="image1" src="img/abc/abc1.jpg"></img>
  <img class="top8" id="image2" src="img/abc/abc2.jpg"></img>
  <img class="top8" id="image3" src="img/abc/abc3.jpg"></img>
  <img class="top8" id="image4" src="img/abc/abc4.jpg"></img>
</div>

＆＃13;

Answer 1

试试这个！

img {
    width: 100%;
    height: auto;
}

Flexbox响应高度的元素

1 个答案: