0

我创建了一个 Bootstrap 3 卡片宽度，并将 div class="card-wide-image-wrap" 设置为 50% 的最小宽度。这可以确保在我的笔记本电脑上正确显示（否则它不会显示带有覆盖文本块的完整图像）。但是，div 的最小宽度为 50% 会破坏卡片在手机上的显示方式（下图）。有没有办法来解决这个问题？

第二个问题：对于右侧添加的每一行文本，左侧的图像似乎都变大了。图像能否以某种方式与卡片的文本面分离，使其保持固定？

下图是 PC/大屏幕上想要的结果。当我将 div min-width 设置为 50% 时，我得到了这个。

PC_card-wide 想要的结果

但是，如下图所示，这在手机上并没有很好地显示： 移动不需要的结果 如果我省略 div min-width 50%，我会在 PC/大屏幕上得到以下不需要的结果：

PC 不需要的结果

但是，它会在移动设备上正确显示：

在此处输入图像描述

这是我的代码。谢谢瑞克：

 <style>

 p {
 color: white;
 }

 h2.ex1 {

 padding-left: 30px;
 }

 ul.ex1 {

 padding-left: 60px;
 }

 p.ex1 {

 padding-left: 30px;
 }

 h6.ex2{

 font-size: 22px;
 }


 .text-block {
  position: absolute;
  bottom: 80px;
  right:370px;

  background-color: #292929;
  color: white;
  padding-left: 20px;
  padding-right: 20px;
  block-size: max-content;

  }

  .cover {
  object-fit: cover;
  width: 10px;
  height: 10px;
  }


   div img{
   min-width:100%;
   min-height:100%;
   height:auto;
   position:relative;
   top:50%;
   left:50%;
   transform:translateY(-50%) translateX(-50%);
   }

   </style>



   <p style="text-align: center;"><br></p><div><div class="col-xs-12">
   <div class="calcite-web">
      <div class="card-base card-wide" style="background: #292929;max-width: 100%; margin: 0 auto;">
   
        <div class="card-wide-image-wrap" style="min-width:50%">
          <img alt="hurricanes" class="card-wide-image cover img-fluid" src="#">
             <div class="text-block">
               <h6 class="ex2" style="text-align: left; color: rgb(38, 149, 188);">Naturkræfter</h6> 
               <p style="text-align: left; color: rgb(38, 149, 188);">Cykloner i den nordlige og 
                sydlige hemisfære, adskilt af ækvator, hvor corioliskraften er 0,&nbsp; &nbsp;og 
                derfor forhindrer hvirvelvindene i at formes og krydse ækvatorlinjen</p>
             </div>
 
         </div>



         <div class="card-content px-2">
          <h2 class="ex1" style="color: white" id="intro">Lorem Ipsum</h2>
           <br>
          <p class="ex1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod 
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
            exercitation ullamco laboris nisi ut aliquip ex ea</p>
             <br>
               <ul class="ex1" style="color: white">
                 <li>Duis aute irure dolor in </li>
                 <li>Eprehenderit in voluptate velit esse cillum </li>
                 <li>Dolore eu fugiat nulla pariatur</li>
                 <li>Excepteur sint occaecat cupidatat non proident</li>
                 <li>Csunt in culpa qui</li>
                 </ul>
                 <br>
 
                  <p><a href="#" class="btn btn-primary" style="min-width: 114px; margin-left: 25px" 
                      target="_blank">Send os en besked</a></p>
                   <br>
        
             </div>
          </div>
       </div>
    </div>
</div>
4

1 回答 1

0

You mentioned that you are using Bootstrap 3, but your img tag uses img-fluid class while it should be using img-responsive class.

<img alt="hurricanes" class="card-wide-image cover img-responsive" src="#">

In addition, I presume your CSS definitions for card-wide are driven by some template? Bootstrap3 inherently lacks cards and uses panels.

于 2020-06-21T16:17:52.727 回答