Question

我知道这听起来像是以前被问到的，但是我已经尝试了从其他问题中发现的许多技巧，而且似乎并没有获得我所需的预期效果。

我正在尝试做出这样的响应方式： Responsive Example gif

我基本上需要将图像居中，图像尺寸为100％。

这是我试图获得这种效果的方法：

我首先创建了一个div，其中包含三个用于“列”的子div。然后，在中间列中，我为“行”创建了三个子div。现在，我需要图像填充允许的最大宽度，同时仍保持该正方形纵横比。同样，图像的高度应确定顶部和底部行的高度。

然后只需要使顶部和底部行中的文本分别与其div的底部和顶部对齐即可。

这看起来像这样：

HTML Visualization of columns

HTML Visualization of center rows

我遇到的问题是我似乎无法获得中心图像来确定其上方和下方的行的高度。

我尝试过...

Flexbox
使用vh（视图高度）
以及使用calc（）有点运气
使用padding-top: 100%设置长宽比

代码是什么样的

/* .row & .col from materialize.css */

.full {
  height: 100vh;
}

.art_top {
  height: 10vh;
  /* I Don't actually want this fixed though */
  padding-bottom: 10px;
  display: flex;
}

.art_center {
  height: 80vh;
  /* I Don't actually want this fixed though */
}

.art_bottom {
  height: 10vh;
  /* I Don't actually want this fixed though */
  padding-top: 10px;
  display: flex;
}

#cover_art {
  width: 100%;
  height: 100%;
  background: center / cover no-repeat;
}

#song_name {
  align-self: flex-end;
}

#artist_name {
  align-self: flex-start;
}

<div class="row">
  <div class="col s2 m3 full"></div>
  <div class="col s8 m6 full">
    <div class="row art_top">
      <a id="song_name" class="bold-title"></a>
    </div>
    <div class="row art_center">
      <div id="cover_art"></div>
    </div>
    <div class="row art_bottom">
      <a id="artist_name" class="bold-title"></a>
    </div>
  </div>
  <div class="col s2 m3 full"></div>
</div>

Answer 1

Flexbox使这种布局非常简单。诀窍是选择性地允许物品弯曲或收缩。

flex属性的缩写表示flex-grow，flex-shrink和flex-basis的3个值（初始宽度或高度取决于弯曲方向）。进入布局中的细节时，只需保持清楚哪些div用作弹性容器即可。 div既是flex容器又是flex项本身，这是很常见的。

我还建议您使用img元素，而不要将图像用作背景，这样您就不会在响应窗口大小中遇到长宽比问题。

一个非常好的资源：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

/* .row & .col from materialize.css */
body {
  margin: 0;
}
.full {
  height: 100vh;
}
.row {
  display: flex;
}
.column {
  flex: 1 1 auto;
}
.column2 {
  background: #b4c2cf;
  display: flex;
  flex-direction: column;
}
.column1 {
  background: #cbb3cc;
}

.column3 {
  background: #cbb2b2;
  display: flex;
  align-items: center;
  justify-content: center;
}
.art_top {
  flex: 1 0 10vh;
  display: flex;
  justify-content: flex-start
  align-self: flex-end;
}
.art_center {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.art_bottom {
  flex: 1 0 10vh;
  text-align: right;
}
#cover_art {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}
#song_name {
  align-self: flex-end;
}
#artist_name {
  align-self: flex-start;
}
.bold-title {
  display: block;
  font-weight: bold;
  padding: 10px;
}
.small-box {
  background: #8f588c;
  height: 100%;
  max-height: 70px;
  width: 100%;
  max-width: 70px;
}

<div class="row full">
  <div class="column column1"></div>
  <div class="column column2">
    <div class="art_top">
      <a id="song_name" class="bold-title">My Album Title</a>
    </div>
    <div class="art_center">
      <img id="cover_art" src="https://picsum.photos/400" />
    </div>
    <div class="art_bottom">
      <a id="artist_name" class="bold-title">Artist Name</a>
    </div>
  </div>
  <div class="column column3">
    <div class="small-box"></div>
  </div>
</div>

自适应CSS图像大小影响行大小

代码是什么样的

1 个答案: