时间戳

首页 > 解决方案 > 我如何使用 bootstrap 4 在图像上做响应式文本

css - 我如何使用 bootstrap 4 在图像上做响应式文本

问题描述

我有一个内部有内容的图像，我希望图像内部的字母能够响应，当我调整屏幕大小时，字母应该具有相同的比例，但是现在它们在调整屏幕大小时相互重叠，我需要做它仅与引导程序网格一起使用，不能与媒体查询一起使用

.banner{
    position: relative;
}
.heading-annual{
    position: absolute;
    top: 10%;
    color: whitesmoke;
    left: 7%;
}
.heading-medicine{
    position: absolute;
    top: 25%;
    color: whitesmoke;
    left: 7%;
}
.heading-manchester{
    position: absolute;
    top: 43%;
    color: whitesmoke;
    left: 7%;
}
.heading-date{
    position: absolute;
    top: 55%;
    color: whitesmoke;
    left: 7%;
}
<div class="container-fluid px-0">
        <div class="row">
            <div class="col-md-12 col-lg-12 banner">
                <img src="https://rcpmedicine.co.uk/wp-content/uploads/2018/11/new_banner_home.png" height="100%" width="100%" >
            </div>
        </div>
    </div>
    <h1 class="heading-annual">RCP annual conference</h1>
    <h1 class="heading-medicine">Medicine 2019</h1>
    <h4 class="heading-manchester">Manchester Central</h4>
    <h4 class="heading-date">25-26 April 2019</h4>

标签： cssbootstrap-4

解决方案

有什么理由必须使用 img 吗？你不能用背景图片代替吗？

尝试这个。

.banner {
  min-height: 500px;
  display: flex;
  align-items: center;
  background-image: url(https://rcpmedicine.co.uk/wp-content/uploads/2018/11/new_banner_home.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  padding: 50px;
  color: white;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container-fluid banner">
        <div class="row">
            <div class="col-md-12 col-lg-12 ">
                <h1 class="heading-annual">RCP annual conference</h1>
                <h1 class="heading-medicine">Medicine 2019</h1>
                <h4 class="heading-manchester">Manchester Central</h4>
                <h4 class="heading-date">25-26 April 2019</h4>
            </div>
        </div>
    </div>

推荐阅读