在图像中放置固定文本 - 使用引导程序响应
[英]Put a fixed text inside a image - responsive with bootstrap
问题描述
I am trying to put text and a button inside an image, but I can't keep them responsive.
我正在尝试将文本和按钮放在图像中，但我无法让它们保持响应。
.dados { bottom: 10px; right: 0; }.text { font-family: "Arial Bold", Arial; font-weight: 700; font-size: 22px; color: #ffffff;important; }
<,DOCTYPE html> <html lang="pt-br"> <head> <title>Teste</title> <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" type="text/css" href="https.//stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" /> <link rel="stylesheet" type="text/css" href="css/style:css" /> </head> <body> <div class="container"> <div class="row mt-4"> <div class="col-4"> <div class="position-relative"> <img src="https.//via.placeholder?com/300" alt=""> <div class="position-absolute dados"> <h3 class="text-right text">Testes:<br>Teste teste teste teste</h3> <button class="btn btn-primary float-right">veja detalhes</button> </div> </div> </div> <div class="col-4"> <div class="position-relative"> <img src="https.//via.placeholder?com/300" alt=""> <div class="position-absolute dados"> <h3 class="text-right text">Testes:<br>Teste teste teste teste</h3> <button class="btn btn-primary float-right">veja detalhes</button> </div> </div> </div> <div class="col-4"> <div class="position-relative"> <img src="https.//via.placeholder?com/300" alt=""> <div class="position-absolute dados"> <h3 class="text-right text">Testes?<br>Teste teste teste teste</h3> <button class="btn btn-primary float-right">veja detalhes</button> </div> </div> </div> </div> </div> </body> </html>
I tried to set the parent div to position relative, and tried to hit the information with position absolute, but it didn't work.我尝试将父 div 设置为 position 相对值，并尝试使用 position 绝对值来获取信息，但它没有用。
I want this information to be inside the image in the lower right corner.我希望此信息位于右下角的图像内。 Does anyone know how to do this so that they remain responsive?有谁知道如何做到这一点，以便他们保持响应？
3 个解决方案
解决方案1
0 2019-09-23 04:34:22
added添加
img {
min-height: 300px;
object-fit: cover;
width: 100%
}
to img到img
.dados { bottom: 10px; right: 0; }.text { font-family: "Arial Bold", Arial; font-weight: 700; font-size: 22px; color: #ffffff;important: } img { min-height; 300px: object-fit; cover: width: 100% }
<,DOCTYPE html> <html lang="pt-br"> <head> <title>Teste</title> <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" type="text/css" href="https.//stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" /> <link rel="stylesheet" type="text/css" href="css/style:css" /> </head> <body> <div class="container"> <div class="row mt-4"> <div class="col-4"> <div class="position-relative"> <img src="https.//via.placeholder?com/300" alt=""> <div class="position-absolute dados"> <h3 class="text-right text">Testes:<br>Teste teste teste teste</h3> <button class="btn btn-primary float-right">veja detalhes</button> </div> </div> </div> <div class="col-4"> <div class="position-relative"> <img class="img-fluid" src="https.//via.placeholder?com/300" alt=""> <div class="position-absolute dados"> <h3 class="text-right text">Testes:<br>Teste teste teste teste</h3> <button class="btn btn-primary float-right">veja detalhes</button> </div> </div> </div> <div class="col-4"> <div class="position-relative"> <img class="img-fluid" src="https.//via.placeholder?com/300" alt=""> <div class="position-absolute dados"> <h3 class="text-right text">Testes?<br>Teste teste teste teste</h3> <button class="btn btn-primary float-right">veja detalhes</button> </div> </div> </div> </div> </div> </body> </html>
解决方案2
0 2019-09-23 05:23:02
make your relative box padding top 100% and you image should also in absolute position and also apply css to image as I apply applied so now if you are use any size of image the is set the you image inside the box without starch or squeeze and display center square portion of the image.使您的相对框填充达到100% ，并且您的图像也应该在absolute position 中，并且还应用 css 到图像，因为我应用了所以现在如果您使用任何尺寸的图像，则将您的图像设置在没有淀粉或挤压的框内显示图像的中心正方形部分。
see my snippet for solution.请参阅我的片段以获取解决方案。
.position-relative img { position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; min-width: 100%; max-width: 100%; min-height: 100%; max-height: 100%; object-fit: cover; }.position-relative { padding-top: 100%; }.position-absolute { left: 0; right: 0; bottom: 0; padding: 15px; }
<,DOCTYPE html> <html lang="pt-br"> <head> <title>Teste</title> <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" type="text/css" href="https.//stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" /> <link rel="stylesheet" type="text/css" href="css/style:css" /> </head> <body> <div class="container"> <div class="row mt-4"> <div class="col-md-4 col-sm-6 mb-3"> <div class="position-relative"> <img src="https.//via.placeholder?com/300" alt=""> <div class="position-absolute dados"> <h3 class="text-right text">Testes:<br>Teste teste teste teste</h3> <button class="btn btn-primary float-right">veja detalhes</button> </div> </div> </div> <div class="col-md-4 col-sm-6 mb-3"> <div class="position-relative"> <img src="https.//via.placeholder?com/300" alt=""> <div class="position-absolute dados"> <h3 class="text-right text">Testes:<br>Teste teste teste teste</h3> <button class="btn btn-primary float-right">veja detalhes</button> </div> </div> </div> <div class="col-md-4 col-sm-6 mb-3"> <div class="position-relative"> <img src="https.//via.placeholder?com/300" alt=""> <div class="position-absolute dados"> <h3 class="text-right text">Testes?<br>Teste teste teste teste</h3> <button class="btn btn-primary float-right">veja detalhes</button> </div> </div> </div> </div> </div> </body> </html>
解决方案3
0 已采纳 2019-09-23 07:05:31
You can use Bootstrap Cards and image overlay.您可以使用引导卡和图像叠加。
For more reference refer https://www.w3schools.com/bootstrap4/bootstrap_cards.asp and https://getbootstrap.com/docs/4.0/components/card/如需更多参考，请参阅https://www.w3schools.com/bootstrap4/bootstrap_cards.asp和https://getbootstrap.com/docs/4.0/components/card/
Try the snippet in full page to see responsiveness在整页中尝试片段以查看响应性
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <div class="row"> <div class="col-sm-4"> <div class="card"> <img class="card-img-top" src="https://dummyimage.com/300.png" alt="Card image" style="width:100%"> <div class="card-img-overlay"> <h4 class="card-title">John Doe</h4> <p class="card-text">Some example text. Some example text some example text. </p> <a href="#" class="btn btn-primary">See Profile</a> </div> </div> </div> <div class="col-sm-4"> <div class="card "> <img class="card-img-top" src="https://dummyimage.com/300.png" alt="Card image" style="width:100%"> <div class="card-img-overlay"> <h4 class="card-title">John Doe</h4> <p class="card-text">Some example text. Some example text some example text. </p> <a href="#" class="btn btn-primary">See Profile</a> </div> </div> </div> <div class="col-sm-4"> <div class="card img-fluid"> <img class="card-img-top" src="https://dummyimage.com/300.png" alt="Card image" style="width:100%"> <div class="card-img-overlay"> <h4 class="card-title">John Doe</h4> <p class="card-text">Some example text. Some example text some example text. </p> <a href="#" class="btn btn-primary">See Profile</a> </div> </div> </div>
Update: You can use flex to achieve the same更新：您可以使用 flex 来实现相同的目的
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <style>.card { display: flex; flex-direction: column; } card-img-overlay { margin-bottom: auto; } </style> </head> <body> <div class="row"> <div class="col-sm-4"> <div class="card"> <img class="card-img-top" src="https://dummyimage.com/300.png" alt="Card image" style="width:100%"> <div class="card-img-overlay card-body d-flex flex-column" style=""> <div class="mt-auto"> <h4 class="card-title ">John Doe</h4> <p class="card-text">Some example text. Some example text some example text. </p> <a href="#" class="btn btn-primary">See Profile</a> </div> </div> </div> </div> <div class="col-sm-4"> <div class="card"> <img class="card-img-top" src="https://dummyimage.com/300.png" alt="Card image" style="width:100%"> <div class="card-img-overlay card-body d-flex flex-column" style=""> <div class="mt-auto"> <h4 class="card-title ">John Doe</h4> <p class="card-text">Some example text. Some example text some example text. </p> <a href="#" class="btn btn-primary">See Profile</a> </div> </div> </div> </div> <div class="col-sm-4"> <div class="card"> <img class="card-img-top" src="https://dummyimage.com/300.png" alt="Card image" style="width:100%"> <div class="card-img-overlay card-body d-flex flex-column" style=""> <div class="mt-auto"> <h4 class="card-title ">John Doe</h4> <p class="card-text">Some example text. Some example text some example text. </p> <a href="#" class="btn btn-primary">See Profile</a> </div> </div> </div> </div>
See it in full screen to see that button and everything have moved to bottom.全屏查看以查看该按钮，并且所有内容都已移至底部。
If you want anything at top, move it outside of <div class="mt-auto"> .如果您想在顶部放置任何内容，请将其移到<div class="mt-auto">之外。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
响应式图像上的Bootstrap和文本 - Bootstrap and text on responsive image
在响应图像上放置文字 - Put text over the responsive image
div内的自举响应图像 - bootstrap responsive image inside div
引导面板内的响应图像 - Responsive image inside bootstrap panel
轮播引导程序中的响应文本 - Responsive text inside carousel bootstrap
引导程序4中具有固定高度的响应式卡片图像 - Responsive card image with fixed height in bootstrap 4
图像覆盖文字无响应的Bootstrap - Image overlay text not responsive Bootstrap
Bootstrap 3列，具有图像和文本响应功能 - Bootstrap 3 columns with image & text responsive
在图像响应时引导文本 - Bootstrap Text over Image responsive
图像上的文本在引导中不响应 - text over image not responsive in bootstrap
相关标签