当我给出 max-height 时，卡片图像宽度不相等 [英] Card image width not equal when I gave max-height

查看：11
本文介绍了当我给出 max-height 时，卡片图像宽度不相等的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在制作一张图片大小和文字相同的卡片.我给了图像 max-height .但图像大小不等.我将在下面给出我的代码.我附上了我网站的快照以供更好的参考.在这个项目中，我使用 HTML、CSS 和 BOOTSTRAP4

问题是:图片

 .kbcard {box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);最大宽度:300px；保证金:自动；文本对齐:居中；字体系列:arial；}.kbtitle {颜色:灰色；字体大小:18px；}.kb{文字装饰:无；字体大小:22px；颜色:黑色;}

<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>约翰·多伊</h1><p class="kbtitle">CEO &创始人，示例</p><p>哈佛大学</p>

<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>约翰·多伊</h1><p class="kbtitle">CEO &创始人，示例</p><p>哈佛大学</p>

我需要:快照

解决方案 

 img {垂直对齐:中间；边框样式:无；宽度:100%；高度:250px；适合对象:覆盖；}

尝试将这些样式添加到您的图片标签

I am making a card with equal image size and text. I had given max-height to the image. but the images are not equal in size. I will give my code below. I am attaching my website's snap for better reference. In this project, I am using HTML, CSS and BOOTSTRAP4

Problem is : 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>

I need : Snap

解决方案 

 img {
        vertical-align: middle;
        border-style: none;
        width: 100%;
        height: 250px;
        object-fit: cover;
    }

try these stylings to your image tag

这篇关于当我给出 max-height 时，卡片图像宽度不相等的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆