当前位置: 首页 > 知识库问答 >
问题:

转换到移动视图后,如何在引导列上使图像缩放到全宽

益承颜
2023-03-14

我正在努力使右边的图像伸展到全宽,这时你会使屏幕尺寸变小,这样它就可以过渡到移动视图了。在bootstrap中是否有其他类可以做类似于img-fluid的工作,但是当它在bootstrap网格系统中的文本下方时显示图像全宽?

<div class="row">
<div class="col-md-6 d-flex">
<div class="align-self-center">
<p class="lead font-weight-bold">sometext</p>
</div>
</div>
<div class="col-sm-6">
  <img class="img-fluid" src="someimage.jpg">
</div>
</div>

下面是我的小提琴:http://jsfidle.net/x1hphsvb/2220/看看我的意思是简单地降低显示窗口的宽度。Image位于文本下方,只填充div的一半,当我想让它完全填充它并像现在一样在过渡之前表现出来时。

共有1个答案

宗政欣可
2023-03-14

这两列应具有相同的断点(即MD/SM),以便它们同时变为全宽...

   <div class="row">
     <div class="col-md-6 d-flex">
      <div class="align-self-center">
       <p class="lead font-weight-bold">sometext</p>
      </div>
     </div>
     <div class="col-md-6">
      <img class="img-fluid" src="someimage.jpg">
     </div>
   </div>

http://jsfidle.net/dwnu5zjq/

 类似资料:
  • 我希望用户能够将两个图像缩放到一起,同时保持它们之间的正确相对位置。我在其中一幅图像上使用缩放手势检测器,然后将手势扩展到另一幅图像。我的问题是,虽然我可以让图像一起移动,但一旦我尝试缩放第二个图像,翻译就会急剧下降。它们是我不知道的缩放时发生的事情吗?信息。ParentPrecords变量设置在缩放手势检测器的开头,然后再对父对象(基础图像)进行任何更改。

  • 我有一个无法解决的问题... 我有一个自定义的imageview,它会根据更大的尺寸改变大小——包含该视图的布局的宽度或高度。它的工作方式总是适合布局。 它的布局是这样的: 我正在努力实现的是,我有尺寸为1000x1000px的原始地图。在这张地图上,我有一些点。我必须在Android上显示这张地图,并在与原始地图相同的点上添加其他视图。 所以举个例子: > 原始地图为1000x1000px 我用

  • 我对图像进行了收缩缩放,但是当我第一次加载应用程序时,整个图像不可见,只有一部分。图像填充了屏幕的宽度,但其上下都有空白。此外,当缩放图像时,图像变得非常短。纵横比应保持不变。 我希望在应用程序加载时使整个图像可见,然后我希望能够用两根手指缩小图像,其中图像不会小于屏幕的大小,以便屏幕始终充满(图像是地图)。 为了放大,图像应该超出手机屏幕的宽度和高度。这样我就可以平移过去查看地图的细节。 任何帮

  • 我一直在做曼德尔布洛特集,并试图缩放,但缩放模式变得非常麻烦。当我缩放它完美地缩放,但图像大小减少到原来的一半。下次我再次缩放时,图片大小会增加,并试图跳过查看窗口。代码是c /opengl.在这里发布之前,我试图让我的代码变得干净一点。 执行时

  • 我有一个图像,我正在尝试缩放,因为屏幕大小减少。在桌面上,1336x625分辨率的图像可以正常工作,但一旦屏幕缩小到500x625时,图像就不能适当缩放,边缘也会被削减。我试着把最大宽度和位置。但还是没用。我需要改变什么才能让它工作。 Css代码 Html代码:

  • 在用图像创建mp4幻灯片时,我在网上为zoompan提供了一些示例,但我仍然没有完全掌握如何使它们从图像中的某个位置开始。下面是典型的命令: ffmpeg-i image-000。jpg-filter_complex“color=c=black:r=60:s=1920x1080[demo];[0:v]格式=pix_fmts=yuva420p,比例=8000:-1,zoompan=z='min(zo