Question

我正在尝试构建一个响应式材料列表视图，其中每张卡包含一个图像，一些文本细节和一些用户操作。文本详细信息可能因列表中的项目而异，因此卡片高度可能会有所不同。由于设计需要响应，卡的宽度也可以变化。

我需要做的是确保图像始终是正方形。我在这里看到了如何在垂直布局中实现这一点的好答案，但不是在水平布局中。

这是我尝试使用Flex来展示框布局的模型。作为解决方案的一部分，我并不依赖于Flex。

示例代码

.card {
  display: flex;
  flex-flow: row wrap;
  width: 100%;
  margin-bottom: 15px;
}

.card .title {
  line-height: 3rem;
  font-size: 1.5rem;
  font-weight: 300;
}

.card .action {
  background: grey;
  order: 3;
  flex-basis: 100%;
}

.card .content {
  background: red;
  order: 2;
  flex-grow: 1;
}

.card .image {
  background: gold;
  order: 1;
  flex-grow: 1;
}

<div class="row">
  <div class="medium-6 columns end">
    <div class="card">
      <div class="content">
        <span class="title">
          Just a Title
        </span>
      </div>
      <div class="action">
        <p>this is an action</p>
      </div>
      <div class="image">
        <p>Image goes here</p>
      </div>
    </div>
    <div class="card">
      <div class="content">
        <span class="title">
          Title with some text
        </span>
        <P>This is some content under the title</P>
      </div>
      <div class="action">
        <p>this is an action</p>
      </div>
      <div class="image">
        <p>Image goes here</p>
      </div>
    </div>
    <div class="card">
      <div class="content">
        <span class="title">
          Title with more text
        </span>
        <P>This is some content under the title</P>
        <P>Second line of text</P>
      </div>
      <div class="action">
        <p>this is an action</p>
      </div>
      <div class="image">
        <p>Image goes here</p>
      </div>
    </div>
  </div>
</div>

Answer 1

尝试在工作结束时添加此脚本：

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.js"></script>
<script>
    var cw = $('.image').width();
    $('.image').css({
    'height': cw + 'px'
    });
</script>

修改

要对窗口调整大小进行操作，请尝试以下操作：

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.js"></script> <script> var cw = $('.image').width(); $('.image').css({ 'height': cw + 'px' }); window.onresize = function(event) { var cw = $('.image').width(); $('.image').css({ 'height': cw + 'px' }); }; </script>

Answer 2

如果你的图像是正方形

，你可以这样做

＆＃13;

<div class="row">
  <div class="medium-6 columns end">
    <div class="card">
      <div class="content">
        <span class="title">
          Just a Title
        </span>
      </div>
      <div class="action">
        <p>this is an action</p>
      </div>
      <div class="image">
        <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=img%20goes%20here&w=300&h=300">
      </div>
    </div>
    <div class="card">
      <div class="content">
        <span class="title">
          Title with some text
        </span>
        <P>This is some content under the title</P>
      </div>
      <div class="action">
        <p>this is an action</p>
      </div>
      <div class="image">
        <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=img%20goes%20here&w=300&h=300">
      </div>
    </div>
    <div class="card">
      <div class="content">
        <span class="title">
          Title with more text
        </span>
        <P>This is some content under the title</P>
        <P>Second line of text</P>
      </div>
      <div class="action">
        <p>this is an action</p>
      </div>
      <div class="image">
        <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=img%20goes%20here&w=300&h=300">
      </div>
    </div>
  </div>
</div>

＆＃13;

static int positiveHash(string param)
{
     return new List<string>() {param}.Select(s => s.GetHashCode()).Select(i => (i > 0) ? (i) : (-i)).Single();
}

＆＃13;

在水平响应布局中保持平方比

2 个答案: