在Bootstrap中调整文本大小以适应图像和屏幕大小

Question

Here is a the jsFiddle link to my SSCCE, but the gist of my code is below. 这是到我的SSCCE的jsFiddle链接，但是下面是我的代码的要点。 I'm using Twitter Bootstrap 4.0 to make a simple page: 我正在使用Twitter Bootstrap 4.0创建一个简单的页面：

<!DOCTYPE HTML>
<html>
<head>
    <title>FooBar</title>
    <meta http-equiv="Content-Type" content="text/html; 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/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" />
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container text-center mx-auto">
    <div class="col-lg-12 col-sm-12 well-lg">
        <img src="https://s3.amazonaws.com/smeeb-public-images/foobar.png" class="img-fluid mx-auto img-rounded" alt="FooBar logo" />
    </div>
    <div class="col-lg-12 col-sm-12 well-lg">
        <h1 style="color: rgb(0, 170, 236); font-size: 40px;">FOOBAR</h1>
    </div>
    <div class="col-lg-12 col-sm-12 well-lg alert alert-danger">
        <strong>Oops!</strong> Something went wrong!
    </div>
    <div class="col-lg-12 col-sm-12 well-lg">
        <button type="button" class="btn btn-primary btn-lg">Sign In</button>
    </div>
    <div class="col-lg-12 col-sm-12 well-lg">&nbsp;</div>
</div>
</body>
</html>

As you can see in the jsFiddle, there are several glaring issues: 正如您在jsFiddle中看到的那样，存在几个明显的问题：

The image is way too big; 该图像是太大了; and 和
The h1 title under the image is way too small; 该h1的图像下标题来说太小了; and 和
Both the image + title aren't horizontally centered on a large screen/viewport 图像和标题均未在大屏幕/视口上水平居中

I'm trying to tune either the bootstrap classes or the CSS stylings directly so that: 我试图直接调整bootstrap类或CSS样式，以便：

The image and title are always perfectly centered 图像和标题始终完美居中
On a larger screen (desktop/laptop browser), the image only takes up maybe 20% height + width of the screen 在较大的屏幕上（台式机/笔记本电脑浏览器），图像仅占据屏幕高度+宽度的20％
On a smaller screen (mobile), the image takes up most of the width of the screen, maybe with a few % of padding on both sides 在较小的屏幕（移动设备）上，图像占据了屏幕的大部分宽度，可能在两侧都有少量填充
In all cases, the h1 title does its best to resize the text so that its width is more or less the same width of the image 在所有情况下， h1标题都会尽力调整文本的大小，以使其宽度大致等于图像的宽度

Can anyone see where I'm going awry? 有人可以看到我要去哪里吗？

Answer 1

Here is an example of what you might do. 这是您可能会做的一个例子。 Obviously the details of the styles are up to you to match your exact preference. 显然，样式的详细信息取决于您的确切偏好。

 .well-lg img{ width:20%; } body{ display:flex; justify-content:center; } @media screen and (max-width:468px){ .well-lg img{ width:80%; } .well-lg h1{ font-size:4em !important; } }

 <!DOCTYPE HTML> <html> <head> <title>FooBar</title> <meta http-equiv="Content-Type" content="text/html; 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/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" /> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> </head> <body> <div class="container text-center mx-auto"> <div class="col-lg-12 col-sm-12 well-lg"> <img src="https://s3.amazonaws.com/smeeb-public-images/foobar.png" class="img-fluid mx-auto img-rounded" alt="FooBar logo" /> </div> <div class="col-lg-12 col-sm-12 well-lg"> <h1 style="color: rgb(0, 170, 236); font-size: 40px;">FOOBAR</h1> </div> <div class="col-lg-12 col-sm-12 well-lg alert alert-danger"> <strong>Oops!</strong> Something went wrong! </div> <div class="col-lg-12 col-sm-12 well-lg"> <button type="button" class="btn btn-primary btn-lg">Sign In</button> </div> <div class="col-lg-12 col-sm-12 well-lg">&nbsp;</div> </div> </body> </html>

在Bootstrap中调整文本大小以适应图像和屏幕大小

问题描述

1 个解决方案

解决方案1
1 已采纳 2018-03-07 10:40:27

在Bootstrap中调整文本大小以适应图像和屏幕大小

问题描述

1 个解决方案

解决方案1 1 已采纳 2018-03-07 10:40:27

解决方案1
1 已采纳 2018-03-07 10:40:27