我想构建一个卡片式布局。这些卡片应具有标准 tcg 卡的宽高比。
因此，对于方面服务，我发现我必须添加
padding-top: 39.68%;
在 plunkr 中，我已经构建了这个。在col-sm-3的初始状态下效果很好，但是一旦切换到col-xs-2，长宽比就完全不同了。
如果你在 plunkr 中调整它的大小，你就会明白我的意思。
最佳答案
根据您提供的宽高比，即 56:81 的卡片高度应为 81/56*width。卡片宽度根据 Bootstrap 类 col-xs-3(16.666667%) 和 col-sm-2(25%) 的不同而变化。
我们可以通过将其作为 div 的填充来保持上述高度。现在，如果我们向 div 添加任何内容，则 div 的高度会增加，为避免这种情况，请向您的 div 添加一个包装器。
填充百分比为 24.1% 即 sm 为 81/56*16.66667% 和 36.16% 即 81/56 *25% xs
.card-wrapper {
padding-top: 24.1%;
background-color: grey;
border: 3px solid;
position: relative;
}
.card-content {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right:0;
}
@media (max-width: 767px) {
.card-wrapper {
padding-top: 36.16%;
}
}<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap@*" data-semver="3.3.2" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-2 card-wrapper col-xs-3">
<div class="card-content">
1
</div>
</div>
<div class="col-sm-2 card-wrapper col-xs-3">
<div class="card-content">
2
</div>
</div>
<div class="col-sm-2 card-wrapper col-xs-3">
<div class="card-content">
1
</div>
</div>
<div class="col-sm-2 card-wrapper col-xs-3">
<div class="card-content">
2
</div>
</div>
<div class="col-sm-2 card-wrapper col-xs-3">
<div class="card-content">
1
</div>
</div>
<div class="col-sm-2 card-wrapper col-xs-3">
<div class="card-content">
2
</div>
</div>
<div class="col-sm-2 card-wrapper col-xs-3">
<div class="card-content">
1
</div>
</div>
<div class="col-sm-2 card-wrapper col-xs-3">
<div class="card-content">
2
</div>
</div>
</div>
</div>
</body>
</html>关于css - 自举比率，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44948520/