Question

第二个h5元素的文本没有正确调整大小并超出背景颜色，我还测试了将h5放在div中并将css应用于div但它没有用，我错过了什么？

这是相关代码（我必须删除其他元素和css属性）：

.container {
    position: relative;
    display: inline-block;
    margin-top: 50px;
}
.card .front {
    color: white;
    text-align: center;
    font-weight: bold;
    position: absolute;
}
.card .front h5 {
    background-color: #5E92F2;
    padding: 10px 0 10px 0;
    margin-top: 98%;
    width: 198px;
    height: 44px;
}

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</head>
<body>
<section class="container">
            <div class="card">
                <div class="front" style="background-image: url('image.jpg');">
                    <h5>Image 1</h5>
                </div>
                <div class="back">Abc</div>
            </div>
</section>

<section class="container">
            <div class="card">
                <div class="front" style="background-image: url('image.jpg');">
                    <h5>Image 1 With more text</h5>
                </div>
                <div class="back">Abc</div>
            </div>
</section>

Answer 1

试试这个：

h5{
    font-size: 100%;
}

Answer 2

由于h5具有固定的高度，这是预期的行为。

更改为min-height: 44px;规则

中的.card .front h5

.container {
    position: relative;
    display: inline-block;
    margin-top: 50px;
}
.card .front {
    color: white;
    text-align: center;
    font-weight: bold;
    position: absolute;
}
.card .front h5 {
    background-color: #5E92F2;
    padding: 10px 0 10px 0;
    margin-top: 98%;
    width: 198px;
    min-height: 44px;
}

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</head>
<body>
<section class="container">
            <div class="card">
                <div class="front" style="background-image: url('image.jpg');">
                    <h5>Image 1</h5>
                </div>
                <div class="back">Abc</div>
            </div>
</section>

<section class="container">
            <div class="card">
                <div class="front" style="background-image: url('image.jpg');">
                    <h5>Image 1 With more text</h5>
                </div>
                <div class="back">Abc</div>
            </div>
</section>

Answer 3

对于h5，您要添加height: 44px;，因此如果减小字体大小，它将采用默认的h5字体大小来解决问题或增加h5的高度1}}

所以请使用类似

的内容

.card .front h5{
 font-size:16px;
}

或

.card .front h5{
 height:64px;
}

Answer 4

你的css将元素的高度设置为44px，将font-size设置为1.25rem，更改其中一个属性或两者，例如，如果要保留字体大小，则将heigth设置为auto，或将font-size更改为100％如果你想保持元素的高度。有几种方法可以做到这一点。

正确调整元素内容大小的问题

4 个答案: