我正在制作一张具有相同图像尺寸和文字的卡片。
我已经给图像max-height
。但图片大小不相等。
我将在下面给出我的代码。
我附上我的网站的快照,以获取更好的参考。
在这个项目中,我使用的是 HTML,CSS和BOOTSTRAP4
问题是:Image
.kbcard {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
max-width: 300px;
margin: auto;
text-align: center;
font-family: arial;
}
.kbtitle {
color: grey;
font-size: 18px;
}
a .kb{
text-decoration: none;
font-size: 22px;
color: black;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="row">
<div class="col-md-3">
<div class="kbcard">
<img src="https://www.saintleuparis.catholique.fr/IMG/arton691.jpg?1467978372" alt="John" style="max-width:300px">
<h1>John Doe</h1>
<p class="kbtitle">CEO & Founder, Example</p>
<p>Harvard University</p>
</div>
</div>
<div class="col-md-3">
<div class="kbcard">
<img src="https://www.saintleuparis.catholique.fr/local/cache-vignettes/L187xH270/images-74-b67fc.jpg?1468002198" alt="John" style="max-width:300px">
<h1>John Doe</h1>
<p class="kbtitle">CEO & Founder, Example</p>
<p>Harvard University</p>
</div>
</div>
</div>
我需要:Snap
答案 0 :(得分:1)
img {
vertical-align: middle;
border-style: none;
width: 100%;
height: 250px;
object-fit: cover;
}
尝试将这些样式应用于您的图片标签
答案 1 :(得分:0)
最大宽度不需要 kbcard ,因为您使用的是引导程序。设置图像的最大高度和最小高度。并从图像添加style="max-width:300px"
class="img-fluid"
.kbcard {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
margin: auto;
text-align: center;
font-family: arial;
}
.kbcard img{
max-height:150px;
min-height:150px;
}
.kbtitle {
color: grey;
font-size: 18px;
}
a .kb{
text-decoration: none;
font-size: 22px;
color: black;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="row">
<div class="col-6 col-md-3">
<div class="kbcard">
<img src="https://www.saintleuparis.catholique.fr/IMG/arton691.jpg?1467978372" alt="John" class="img-fluid">
<h1>John Doe</h1>
<p class="kbtitle">CEO & Founder, Example</p>
<p>Harvard University</p>
</div>
</div>
<div class="col-6 col-md-3">
<div class="kbcard">
<img src="https://www.saintleuparis.catholique.fr/local/cache-vignettes/L187xH270/images-74-b67fc.jpg?1468002198" alt="John" class="img-fluid">
<h1>John Doe</h1>
<p class="kbtitle">CEO & Founder, Example</p>
<p>Harvard University</p>
</div>
</div>
</div>
答案 2 :(得分:0)
您可以使用内联css
选中这个。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="row">
<div class="col-md-3">
<div class="kbcard">
<img style="height:250px;width:250px" src="https://www.saintleuparis.catholique.fr/IMG/arton691.jpg?1467978372" alt="John">
<h1>John Doe</h1>
<p class="kbtitle">CEO & Founder, Example</p>
<p>Harvard University</p>
</div>
</div>
<div class="col-md-3">
<div class="kbcard">
<img style="height:250px;width:250px" src="https://www.saintleuparis.catholique.fr/local/cache-vignettes/L187xH270/images-74-b67fc.jpg?1468002198" alt="John">
<h1>John Doe</h1>
<p class="kbtitle">CEO & Founder, Example</p>
<p>Harvard University</p>
</div>
</div>
</div>