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

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

如果你的图像是正方形，你可以这样做

.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: 1;
max-width: 30vw; /* scale img block with page */
}
.card .image img {
display: block;
width: 100%;
}

<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>