Bootstrap 3 对不同屏幕尺寸的全卡响应

Question

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

第二个问题：右边每多加一行文字，左边的图片就好像放大了一样。能否以某种方式将图片与卡片的文字面分开，使其保持固定？

下图是 PC/large 屏幕上想要的结果。当我将 div 最小宽度设置为 50% 时，我得到了这个。

但是，如下图所示，这在移动设备上显示效果不佳 phone：如果我省略 div 最小宽度 50%，我会在 PCs/large 屏幕上得到以下不需要的结果：

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

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

 <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>

Answer 1

您提到您正在使用 Bootstrap 3，但您的 img 标签使用 img-fluid class 而它应该使用 img-responsive class。

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

此外，我假设您的 CSS 卡范围定义是由某些模板驱动的？ Bootstrap3天生缺卡，用面板

Bootstrap 3 对不同屏幕尺寸的全卡响应

Bootstrap 3 card-wide responsiveness to different screen sizes

css

responsive-images

bootstrap-cards