我创建了一个设计,供用户选择不同的模板。所有功能都工作正常,但由于图像尺寸不同,我的卡片设计存在问题。
我已经尝试了在行和列上使用 Flex、固定图像大小和卡片大小的所有方法,但没有成功。
这是我当前的屏幕:
<div class="row">
<? $sql = mysqli_query($conn,"SELECT * FROM payslip_template WHERE status = 'a'");
$i = 1;
while($row = mysqli_fetch_array($sql)) { ?>
<div class="col-md-4 imgcol">
<div class="card imgcard" id="imgcard_<? echo $i; ?>" <? if($row[ 'temp_default']=='y' ) { ?>style="background-color:#8a7f83;"
<? } else { ?> style="background-color:#dedad1;" <? } ?>>
<div class="card-title text-center imgtitle">
<?= strtoupper($row['name']); ?>
</div>
<div class="card-body">
<img src="<?= $row['temp_image']; ?>" class="img-fluid">
<div class="row btnrow">
<div class="col-md-6">
<button type="button" class="<?= $BUTTON_CLASS_DEFAULT; ?>" onclick="defaultact(this.value);" value="<?= $row['aid']." _ ".$i; ?>" style="width: 100%">
<i class="<?= $ICON_CLASS_DEFAULT; ?>"></i>
Default
</button>
</div>
<div class="col-md-6">
<button type="button" class="<?=$BUTTON_CLASS_PREVIEW; ?>" onclick='preview(this.value)' ; value="<?= $row['temp_image'];?>">
<i class="<?=$ICON_CLASS_PREVIEW; ?>"></i>
Preview
</button>
</div>
</div>
</div>
</div>
</div>
<? $i++; } ?>
</div>
最佳答案
通过修复所有图像的高度和宽度,效果很好。
关于jquery - 卡片尺寸因图像高度而不同?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59984073/