Bootstrap 4卡片-图像叠加层文字溢出图像

Question

Bootstrap 4卡片-图像叠加层文字溢出图像

3

我有一张带文字叠加的图片，不确定是什么原因，但在移动设备（小/超小）上，播放按钮和标题由于p文本过长而溢出图像。我搞砸了哪个bootstrap类来引起这个问题？我以为当内部文本变长时，图像高度会自动调整以解决这个问题，难道是图片的问题吗？

html {
  font-size: 18px;
}
@media (min-width: 576px) {
  .container {
    max-width: 540px;
 }
}
@media (min-width: 768px) {
  .container {
    max-width: 720px;
 }
}
@media (min-width: 992px) {
  .container {
    max-width: 960px;
 }
}
@media (min-width: 1200px) {
  .container {
    max-width: 1400px;
 }
}
h1, .h1 {
  font-size: 3.815rem;
}
h2, .h2 {
  font-size: 2.441rem;
}
h3, .h3 {
  font-size: 1.563rem;
}
h4, .h4 {
  font-size: 1.25rem;
}
.product-video-section .product-video-container {
  position: relative;
}
.product-video-section .product-video-container video {
  height: auto;
  vertical-align: middle;
  width: 100%;
}
.product-video-section .product-video-container #product-video-button {
  color: #d4272e;
}
.product-video-section .product-video-container .product-video {
  display: none;
}
.product-video-section .product-video-container .product-video-texts .play-btn-wrap {
  text-decoration: none;
  background-color: #fff;
  border: 1px solid #d4272e;
  display: inline-block;
  border-radius: 50%;
  width: 3.5rem;
  height: 3.5rem;
  color: #d4272e;
  transition: all 300ms ease-in;
  cursor: pointer;
}
.product-video-section .product-video-container .product-video-texts .play-btn-wrap i {
  font-size: 2rem;
}
.product-video-section .product-video-container .product-video-texts .play-btn-wrap:hover {
  background-color: #d4272e;
  transition: all 300ms ease-in;
  transform: scale(1.2);
}
.product-video-section .product-video-container .product-video-texts .play-btn-wrap:hover i {
  color: #fff;
}

<!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">
    <title>Document</title>

    <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
        crossorigin="anonymous"></script>
    <script src="./Library/bower_components/slick-carousel/slick/slick.min.js"></script>
    <script src="./index.js"></script>
    <script src="https://unpkg.com/ionicons@4.2.2/dist/ionicons.js"></script>


    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
        crossorigin="anonymous">
    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"
        integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
    <link rel="stylesheet" href="./Library/bower_components/slick-carousel/slick/slick.css" />
    <link rel="stylesheet" href="./Library/bower_components/slick-carousel/slick/slick-theme.css" />

    <link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">

    <link rel="stylesheet" type="text/css" href="./style/index.css">


</head>

<body>
    
        <div class="product-video-section ">
            <div class="product-video-container card">
                <img src="https://www.dropbox.com/s/5x8p2z5cvip5u38/chicago.jpg?dl=1">
                <div class="card-img-overlay  d-flex align-items-center product-video-texts text-dark" id="">
                    <div class="row">
                        <div class="col-12">
                            <div class="d-flex justify-content-end row">
                                <div class="col-lg-6 col-sm-12">
                                    <h4 class="card-title ">This is video</h4>
                                    <p class="card-text ">
                                        
                                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia sint dolore nemo deserunt voluptatum animi omnis corrupti nam recusandae aliquam, amet ullam qui sequi assumenda, eius, debitis iusto voluptas perferendis!
                                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia sint dolore nemo deserunt voluptatum animi omnis corrupti nam recusandae aliquam, amet ullam qui sequi assumenda, eius, debitis iusto voluptas perferendis! sit amet consectetur adipisicing elit. Officia sint dolore nemo deserunt voluptatum animi omnis corrupti nam recusandae aliquam, amet ullam qui sequi assumenda, eius, debitis iusto voluptas perferendissit amet consectetur adipisicing elit. Officia sint dolore nemo deserunt voluptatum animi omnis corrupti nam recusandae aliquam, amet ullam qui sequi assumenda, eius, debitis iusto voluptas perferendis!!
                                    
                                    </p>
    
                                    <div href="" class="play-btn-wrap d-flex justify-content-center" data-toggle="modal"
                                         data-target="#@videoTarget">
                                        <i class="ion-ios-play product-video-button  align-self-center pl-1" id="" aria-hidden="true"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
    
                    </div>
                </div>
            </div>
        </div>
 
 

</body>

</html>

- jsPlayer

5个回答

2

你在这里面有一些相互竞争的属性。一方面，display: flex; 和 flex-direction: column; 告诉<img>填充.dnow-video-container.card的水平空间（请注意它保持其自然的500px高度），但是你将.card-img-overlay绝对定位，因此将其高度从文档中移除。所以父元素.dnow-video-container.card折叠到了<img>的高度。边框样式或在.dnow-video-container.card上加上overflow: hidden;会显示.card-img-overlay超出了其父元素。

我用过的一种解决方法是将图像分配为父元素的background-image，使可重复流动的文本内容来设置父元素的高度。

最初的回答：您需要处理一些相互竞争的属性。将图片设为其父元素的背景图像可能是一个解决办法。

.parent {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

.overlay {
  padding: 1.25rem;
  color: white;
}

<div class="parent" style="background-image: url('https://www.dropbox.com/s/5x8p2z5cvip5u38/chicago.jpg?dl=1')">
  <div class="overlay">
    <h4>This is video</h4>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia sint dolore nemo deserunt voluptatum animi omnis corrupti nam recusandae aliquam, amet ullam qui sequi assumenda, eius, debitis iusto voluptas perferendis! Lorem ipsum dolor sit amet
      consectetur adipisicing elit. Officia sint dolore nemo deserunt voluptatum animi omnis corrupti nam recusandae aliquam, amet ullam qui sequi assumenda, eius, debitis iusto voluptas perferendis! sit amet consectetur adipisicing elit. Officia sint
      dolore nemo deserunt voluptatum animi omnis corrupti nam recusandae aliquam, amet ullam qui sequi assumenda, eius, debitis iusto voluptas perferendissit amet consectetur adipisicing elit. Officia sint dolore nemo deserunt voluptatum animi omnis
      corrupti nam recusandae aliquam, amet ullam qui sequi assumenda, eius, debitis iusto voluptas perferendis!!</p>
  </div>
</div>

- Ito Pizarro

2

在这种情况下，Bootstrap卡片无法满足我的需求，因为我可能会有很多内容。我决定使用背景图像来代替。这是我的代码:

html {
  font-size: 18px;
}
@media (min-width: 576px) {
  .container {
    max-width: 540px;
 }
}
@media (min-width: 768px) {
  .container {
    max-width: 720px;
 }
}
@media (min-width: 992px) {
  .container {
    max-width: 960px;
 }
}
@media (min-width: 1200px) {
  .container {
    max-width: 1400px;
 }
}
h1, .h1 {
  font-size: 3.815rem;
}
h2, .h2 {
  font-size: 2.441rem;
}
h3, .h3 {
  font-size: 1.563rem;
}
h4, .h4 {
  font-size: 1.25rem;
}
.product-video-section {
  height: 35rem;
}
.product-video-section .product-video-container {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://www.dropbox.com/s/5x8p2z5cvip5u38/chicago.jpg?dl=1");
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-align-content: center;
  align-content: center;
}
.product-video-section .product-video-container .product-video-texts {
  position: absolute;
  top: 50%;
  left: 70%;
  transform: translate(-50%, -50%);
  color: white;
}
.product-video-section .product-video-container .product-video-texts .play-btn-wrap {
  text-decoration: none;
  background-color: #fff;
  border: 1px solid #d4272e;
  display: inline-block;
  border-radius: 50%;
  width: 3.5rem;
  height: 3.5rem;
  color: #d4272e;
  transition: all 300ms ease-in;
  cursor: pointer;
}
.product-video-section .product-video-container .product-video-texts .play-btn-wrap i {
  color: #d4272e;
  font-size: 2rem;
}
.product-video-section .product-video-container .product-video-texts .play-btn-wrap:hover {
  background-color: #d4272e;
  transition: all 300ms ease-in;
  transform: scale(1.2);
}
.product-video-section .product-video-container .product-video-texts .play-btn-wrap:hover i {
  color: #fff;
}

@media (max-width: 992px) {

  .product-video-texts {
      top:50% !important;
      left:40% !important;
  }

}

<!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">
    <title>Document</title>

    <script src="https://code.jquery.com/jquery-3.3.1.js"
        integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
        integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
        integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
        crossorigin="anonymous"></script>
    <script src="./Library/bower_components/slick-carousel/slick/slick.min.js"></script>
    <script src="./index.js"></script>
    <script src="https://unpkg.com/ionicons@4.2.2/dist/ionicons.js"></script>


    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
        integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"
        integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
    <link rel="stylesheet" href="./Library/bower_components/slick-carousel/slick/slick.css" />
    <link rel="stylesheet" href="./Library/bower_components/slick-carousel/slick/slick-theme.css" />

    <link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">

    <link rel="stylesheet" type="text/css" href="./style/index.css">


</head>

<body>
    <div class="product-video-section ">
        <div class="product-video-container">
            <div class="product-video-texts" id="">
                <div class="text-white">
                    <h4>This is video</h4>
                    <p>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia sint dolore nemo deserunt
                        voluptatum animi omnis corrupti nam recusandae aliquam, amet ullam qui sequi assumenda,
                        eius, debitis iusto voluptas perferendis!
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia sint dolore nemo deserunt
                        voluptatum animi omnis corrupti nam recusandae aliquam, amet ullam qui sequi assumenda,
                        eius, debitis iusto voluptas perferendis!
                    </p>

                    <div href="" class="play-btn-wrap d-flex justify-content-center" data-toggle="modal"
                        data-target="#@videoTarget">
                        <i class="ion-ios-play product-video-button  align-self-center pl-1" id="" aria-hidden="true"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>



</body>

</html>

- jsPlayer

你对此感到满意吗？还是你真的想使用<img>标签？ - Salman A

0

将以下代码添加到这个 div（"col-lg-6 col-sm-12"）的类中即可修复：

<style>.example { max-height: 100vh; overflow: auto; }</style>
<div class="col-lg-6 col-sm-12 example">
  <h4 class="card-title ">This is video</h4>
  <p class="card-text ">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia sint dolore nemo deserunt voluptatum animi omnis corrupti nam recusandae aliquam, amet ullam qui sequi assumenda, eius, debitis iusto voluptas perferendis!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia sint dolore nemo deserunt voluptatum animi omnis corrupti nam recusandae aliquam, amet ullam qui sequi assumenda, eius, debitis iusto voluptas perferendis! sit amet consectetur adipisicing elit. Officia sint dolore nemo deserunt voluptatum animi omnis corrupti nam recusandae aliquam, amet ullam qui sequi assumenda, eius, debitis iusto voluptas perferendissit amet consectetur adipisicing elit. Officia sint dolore nemo deserunt voluptatum animi omnis corrupti nam recusandae aliquam, amet ullam qui sequi assumenda, eius, debitis iusto voluptas perferendis!!                                    
  </p>
  <div href="" class="play-btn-wrap d-flex justify-content-center" data-toggle="modal" data-target="#@videoTarget">
    <i class="ion-ios-play dnow-video-button  align-self-center pl-1" id="" aria-hidden="true"></i>
  </div>
</div>

阅读更多：overflow, length units

希望能解决问题，祝你好运！

- A. Meshu

-1

该元素内部的内容变大（或框本身变小），框不会扩展以适应内容。因此，我建议使用background-size CSS属性来调整图像随着元素变大或变小而拉伸和调整大小。

.parent {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

除了使用 <center></center> 标签外，您还可以使用 CSS 属性 border 来确保它在框内。

- Sayan

-1 - 当你提供一个与另一个答案相同的解决方案时，你抄袭了其他答案的内容。此外，<center> 元素已经过时，在今天的 HTML 中不应该使用。 - Ryan Wheale

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ryan Wheale · Accepted Answer

这种情况出现的原因是

具有以下样式：

.card-img-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 1.25rem;
}

这意味着，当元素内的内容变大（或者盒子本身变小）时，盒子不会扩展以适应内容。这是 Bootstrap 卡片组件的限制，你没有做错任何事情。

你有几个选项来解决这个问题：

1) 限制允许放入卡片内的内容量，以便永远不会发生这种情况。对我来说，这是唯一真正的解决方案。根据我的测试，限制为65个单词或大约675个字符似乎适用于所有媒体查询（使用您当前的样式）。

1b) 增加图片的高度。我不确定这是否有效，您需要与我之前关于限制文本输入的建议协调此举措。

2) 编写媒体查询，相应地减小字体大小，以便在必要时调整文本。这是一个繁琐的解决方案，但仍然是一个解决方案。但是，无论编写多少样式，都不能容纳任何数量的文本。您仍需要限制可以放入卡片中的文本量。

3) 使用元素查询根据需要调整元素太小时文本的大小。这与使用 CSS 媒体查询没有太大区别。

4) 放弃使用卡片组件，只需创建一个带有图像背景的 div。您可以使用 background-size CSS 属性来调整图像在元素变大或变小时的拉伸和重新调整大小。