twitter-bootstrap - Bootstrap 4 - 图像似乎没有响应
问题描述
问题：我正在尝试使底部选择中的图像具有响应性。当您缩小页面时，图片看起来很糟糕。当您向下滚动时，您会看到一些咖啡杯的图片。这些就是我正在谈论的图像。
目标是什么：我希望能够使图像看起来具有响应性，因此页面看起来不错。
/*!
* Start Bootstrap - Landing Page v5.0.7 (https://startbootstrap.com/template-overviews/landing-page)
* Copyright 2013-2019 Start Bootstrap
* Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-landing-page/blob/master/LICENSE)
*/
body {
font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-weight: 700;
}
header.masthead {
position: relative;
background-color: #166abf;
background: url(https://github.com/grobconnolly/textjet-landingpage/blob/master/hero.jpg?raw=true) no-repeat center center;
background-size: cover;
padding-top: 8rem;
padding-bottom: 8rem;
}
header.masthead .overlay {
position: absolute;
background-color: #212529;
height: 100%;
width: 100%;
top: 0;
left: 0;
opacity: 0.3;
}
header.masthead h1 {
font-size: 2rem;
}
@media (min-width: 768px) {
header.masthead {
padding-top: 12rem;
padding-bottom: 12rem;
}
header.masthead h1 {
font-size: 3rem;
}
}
.showcase .showcase-text {
padding: 3rem;
}
.showcase .showcase-img {
min-height: 30rem;
background-size: cover;
}
@media (min-width: 768px) {
.showcase .showcase-text {
padding: 7rem;
}
}
.features-icons {
padding-top: 7rem;
padding-bottom: 7rem;
}
.features-icons .features-icons-item {
max-width: 20rem;
}
.features-icons .features-icons-item .features-icons-icon {
height: 7rem;
}
.features-icons .features-icons-item .features-icons-icon i {
font-size: 4.5rem;
}
.features-icons .features-icons-item:hover .features-icons-icon i {
font-size: 5rem;
}
.testimonials {
padding-top: 7rem;
padding-bottom: 7rem;
}
.testimonials .testimonial-item {
max-width: 18rem;
}
.testimonials .testimonial-item img {
max-width: 12rem;
box-shadow: 0px 5px 5px 0px #adb5bd;
}
.call-to-action {
position: relative;
background-color: #343a40;
background: url("../img/bg-masthead.jpg") no-repeat center center;
background-size: cover;
padding-top: 7rem;
padding-bottom: 7rem;
}
.call-to-action .overlay {
position: absolute;
background-color: #212529;
height: 100%;
width: 100%;
top: 0;
left: 0;
opacity: 0.3;
}
footer.footer {
padding-top: 4rem;
padding-bottom: 4rem;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
<!-- custom fonts -->
<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet">
<link href="vendor/simple-line-icons/css/simple-line-icons.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
<title>TextJet - Loyalty Simplied</title>
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-light bg-light static-top">
<div class="container">
<a class="navbar-brand" href="#">TextJet</a>
<a class="btn btn-primary" href="#">Sign In</a>
</div>
</nav>
<!-- Masthead -->
<header class="masthead text-white text-center">
<div class="overlay"></div>
<div class="container">
<div class="row">
<div class="col-xl-9 mx-auto">
<h1 class="mb-5">Finally a "jet-powered" loyalty system for Clover that's affordable!</h1>
<h3 class="mb-5">Plans starting at just $39/mo!</h3>
</div>
<div class="col-md-10 col-lg-8 col-xl-7 mx-auto">
<form>
<div class="form-row">
<div class="col-12 col-md-9 mb-2 mb-md-0">
<input type="email" class="form-control form-control-lg" placeholder="Enter your email for early access...">
</div>
<div class="col-12 col-md-3">
<button type="submit" class="btn btn-block btn-lg btn-primary">Sign up!</button>
</div>
</div>
</form>
</div>
</div>
</div>
</header>
<!-- Icons Grid -->
<section class="features-icons bg-light text-center">
<div class="container">
<div class="row">
<div class="col-lg-4">
<div class="features-icons-item mx-auto mb-5 mb-lg-0 mb-lg-3">
<div class="features-icons-icon d-flex">
<i class="icon-screen-desktop m-auto text-primary"></i>
</div>
<h3>Follow Up With Customers</h3>
<p class="lead mb-0">Forget email blasts and in-mail flyers. Follow up with your customers where they’ll see it: On their phones!</p>
</div>
</div>
<div class="col-lg-4">
<div class="features-icons-item mx-auto mb-5 mb-lg-0 mb-lg-3">
<div class="features-icons-icon d-flex">
<i class="icon-layers m-auto text-primary gameImg"></i>
</div>
<div>
</div>
<h3>Gamify the experience</h3>
<p class="lead mb-0">Use points, promotions, and other incentives to engage with customers and keep them coming back for more.</p>
</div>
</div>
<div class="col-lg-4">
<div class="features-icons-item mx-auto mb-0 mb-lg-3">
<div class="features-icons-icon d-flex">
<i class="icon-check m-auto text-primary"></i>
</div>
<h3>Reward Top Customers</h3>
<p class="lead mb-0">Give customers the ability to redeem their points for free products or to qualify for special deals and loyalty programs.</p>
</div>
</div>
</div>
</div>
</section>
<!-- Image Showcases -->
<section class="showcase">
<div class="container-fluid p-0">
<div class="row no-gutters">
<div class="col-lg-6 order-lg-2 text-white showcase-img" style="background-image: url('coffeecups.png');"></div>
<div class="col-lg-6 order-lg-1 my-auto showcase-text">
<h2>Set-Up Your Account</h2>
<p class="lead mb-0">Your time is valuable. That is why we made TextJet super easy to set-up. You will have your TextJet system generating loyalty in under 5 minutes!</p>
</div>
</div>
<div class="row no-gutters">
<div class="col-lg-6 text-white showcase-img" style="background-image: url('coffeecups.png');"></div>
<div class="col-lg-6 my-auto showcase-text">
<h2>Enroll Your Customers Painlessly</h2>
<p class="lead mb-0">We simplified the enrollment process to allow your customers to easily sign-up for your loyalty program with TextJet. </p>
</div>
</div>
<div class="row no-gutters">
<div class="col-lg-6 order-lg-2 text-white showcase-img" style="background-image: url('coffeecups.png');"></div>
<div class="col-lg-6 order-lg-1 my-auto showcase-text">
<h2>Follow-up & Grow Your Business!</h2>
<p class="lead mb-0">With TextJet, you can send targeted text messages to attract your customers to come back and shop at your store. The larger your loyalty campaign, the bigger the impact you will have on your revenue! </p>
</div>
</div>
</div>
</section>
<!-- Testimonials -->
<section class="testimonials text-center bg-light">
<div class="container">
<h2 class="mb-5">What people are saying...</h2>
<div class="row">
<div class="col-lg-4">
<div class="testimonial-item mx-auto mb-5 mb-lg-0">
<img class="img-fluid rounded-circle mb-3" src="img/testimonials-1.jpg" alt="">
<h5>Margaret E.</h5>
<p class="font-weight-light mb-0">"This is fantastic! Thanks so much guys!"</p>
</div>
</div>
<div class="col-lg-4">
<div class="testimonial-item mx-auto mb-5 mb-lg-0">
<img class="img-fluid rounded-circle mb-3" src="img/testimonials-2.jpg" alt="">
<h5>Fred S.</h5>
<p class="font-weight-light mb-0">"Bootstrap is amazing. I've been using it to create lots of super nice landing pages."</p>
</div>
</div>
<div class="col-lg-4">
<div class="testimonial-item mx-auto mb-5 mb-lg-0">
<img class="img-fluid rounded-circle mb-3" src="img/testimonials-3.jpg" alt="">
<h5>Sarah W.</h5>
<p class="font-weight-light mb-0">"Thanks so much for making these free resources available to us!"</p>
</div>
</div>
</div>
</div>
</section>
<!-- Call to Action -->
<section class="call-to-action text-white text-center">
<div class="overlay"></div>
<div class="container">
<div class="row">
<div class="col-xl-9 mx-auto">
<h2 class="mb-4">Ready to get started? Sign up now!</h2>
</div>
<div class="col-md-10 col-lg-8 col-xl-7 mx-auto">
<form>
<div class="form-row">
<div class="col-12 col-md-9 mb-2 mb-md-0">
<input type="email" class="form-control form-control-lg" placeholder="Enter your email...">
</div>
<div class="col-12 col-md-3">
<button type="submit" class="btn btn-block btn-lg btn-primary">Sign up!</button>
</div>
</div>
</form>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer bg-light">
<div class="container">
<div class="row">
<div class="col-lg-6 h-100 text-center text-lg-left my-auto">
<ul class="list-inline mb-2">
<li class="list-inline-item">
<a href="#">About</a>
</li>
<li class="list-inline-item">⋅</li>
<li class="list-inline-item">
<a href="#">Contact</a>
</li>
<li class="list-inline-item">⋅</li>
<li class="list-inline-item">
<a href="#">Terms of Use</a>
</li>
<li class="list-inline-item">⋅</li>
<li class="list-inline-item">
<a href="#">Privacy Policy</a>
</li>
</ul>
<p class="text-muted small mb-4 mb-lg-0">© Your Website 2019. All Rights Reserved.</p>
</div>
<div class="col-lg-6 h-100 text-center text-lg-right my-auto">
<ul class="list-inline mb-0">
<li class="list-inline-item mr-3">
<a href="#">
<i class="fab fa-facebook fa-2x fa-fw"></i>
</a>
</li>
<li class="list-inline-item mr-3">
<a href="#">
<i class="fab fa-twitter-square fa-2x fa-fw"></i>
</a>
</li>
<li class="list-inline-item">
<a href="#">
<i class="fab fa-instagram fa-2x fa-fw"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</footer>
<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
</body>
</html>
. 有人对如何使它看起来不错有任何建议吗？
解决方案
在您的示例中，我没有看到任何咖啡杯图像，但您可以应用一类“img-fluid”来使图像响应。
https://getbootstrap.com/docs/4.3/content/images/#responsive-images
推荐阅读
- docker - Docker：来自守护程序的错误响应：连接到网络失败
- php - 用于同步来自不同实体的两个字段的 Symfony 关系指南
- javascript - 议程上的完整日历冲突周和议程日
- c++ - 创建向量集
- android - Android - Managed Google Play Console 发生意外错误。请稍后再试。(826769013)
- azure-ad-b2c - 如何：当用户取消注册时重新启动 Azure AD B2C UserJourney
- javascript - 从 API 获取 - 特定 API 错误与一般 HTTP 错误
- terraform - 如何将服务器ID元组展平为字符串？
- asp.net - 单击asp.net mvc中的ng-click后如何避免页面重新加载
- visual-studio - 查看解决方案操作：重新定位项目 - 如何抑制它？