html - 防止在卡片文本较长时使用图像放大引导卡片-6ren

html - 防止在卡片文本较长时使用图像放大引导卡片

转载作者：太空宇宙更新时间：2023-11-04 15:50:09

24

4

如您所见，我在卡片中有一张图片，图片大小是固定的且已知，但卡片文本长度可能会有所不同(短或长)。问题是我怎样才能防止卡片高度按比例放大并强制它保持高度只包含图像并强制文本换行和缩短。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 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="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<div class="container body-content">
	<div class="card text-center">
        <div class="card-header" style="text-align:right;font-weight:bold;font-size:large" dir="rtl">
            <p style="padding-right:20px;margin-bottom:0px">Post Header</p>
        </div>
        <div class="card-body" style="padding-top:0px;padding-bottom:0px;padding-right:0px">
            <div class="row">
                <div class="col-9">
                    <p style="padding-top:20px;padding-bottom:20px;text-align:right;white-space: normal;" dir="rtl" class="card-text">
                        This Is Long Text This Is Long Text This Is Long Text This Is Long Text This Is Long Text This Is Long Text This Is Long TextThis Is Long Text This Is Long Text This Is Long Text This Is Long Text This Is Long Text This Is Long Text This Is Long Text This Is Long Text This Is Long Text
                    </p>
                </div>
                <div class="col-3">
                    <img class="img-fluid" src="http://fakeimg.pl/200/">
                </div>
            </div>
        </div>
	</div>
</div>

最佳答案

使用属性 overflow:hidden 并动态设置 div 的高度解决了这个问题。将 onresize="myFunction()" 和 onload="myFunction()" 添加到您的 body 标签。

function myFunction()
{
	var a=document.getElementById("image").height;
	document.getElementById("test").style.height = a+"px";
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 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="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<body onresize="myFunction()" onload="myFunction()">
<div class="container body-content">
	<div class="card text-center">
        <div class="card-header" style="text-align:right;font-weight:bold;font-size:large" dir="rtl">
            <p style="padding-right:20px;margin-bottom:0px">Post Header</p>
        </div>
        <div class="card-body" style="padding-top:0px;padding-bottom:0px;padding-right:0px;max-height:200px !important;">
            <div class="row">
                <div class="col-9" style="overflow:hidden;" id="test">
                    <p style="padding-top:20px;padding-bottom:20px;text-align:right;" dir="rtl" class="card-text">
                        This Is Long Text This Is Long Text This Is Long Text This Is Long Text This Is Long Text This Is Long Text This Is Long TextThis Is Long Text This Is Long Text This Is Long Text This Is Long Text This Is Long Text This Is Long Text This Is Long Text This Is Long Text This Is Long Text
                    </p>
                </div>
                <div class="col-3">
                    <img class="img-fluid" src="http://fakeimg.pl/200/" id="image">
                </div>
            </div>
        </div>
	</div>
</div>
</body>

希望这对您有所帮助!

关于html - 防止在卡片文本较长时使用图像放大引导卡片，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51168820/

24

4

0

文章推荐： javascript - d3 缩放 : prevent page zoom when using a touchscreen

文章推荐： c# - 反射有什么好处？

文章推荐： php - 当 html 代码作为电子邮件发送时，事情无法正常工作

文章推荐： c++ - 此代码是否泄漏内存？我需要释放任何东西吗？ C++内存

java - Android 在 Canvas 上操作图像 - 使用触摸、移动、放大 - 放大/缩小、缩放
我正在开发这样的摄影应用程序: https://play.google.com/store/apps/details?id=com.photo.editor.collage.maker.photobl
QTableView 放大/缩小
我正在尝试创建一个可以像在 Excel 中一样放大和缩小的 QTableView。此处提出了类似的问题:Zooming function on a QWidget 但是，我在 PyQt 而不是 C
delphi - 放大 TVVirtualStringTree
我想找到放大/缩小 TVirtualStringTree 的“最佳方法”。 “放大”的意思是模仿放大镜。必须通过优先使用 TVirtualStringTree 控件中专门用于此目的的属性/方法来理解
emacs 放大/缩小
有没有办法在emacs上放大和缩小(动态改变字体大小，相当流畅)？最佳答案尝试 C-x C-+ 和 C-x C--；即 Control-x Control-减号/Control-再加上。在一个组
javascript - 放大/缩小时传单标记移动
我在使用 Leaflet 时遇到问题。我在 map 上找到了一堆标记(在我的例子中它代表高尔夫球场)。但是，当我放大/缩小时，标记在 map 上移动。浏览网页后，解决方案似乎是 iconAnchor
javascript - 放大/缩小时传单标记移动
我在使用 Leaflet 时遇到问题。我在 map 上找到了一堆标记(在我的例子中它代表高尔夫球场)。但是，当我放大/缩小时，标记在 map 上移动。浏览网页后，解决方案似乎是 iconAnchor
java - 放大 Slick2D
我正在开发一款非常低分辨率的游戏，我需要放大它才能看到。我知道我可以使用 Graphics.scale(float x, float y) 但我想放大到中心。如何缩放中心的图形？有没有更简单的方法来制
c# - 放大/缩小时Unity相机平移
我有这种方法可以向前/向后和向左/向右平移相机。我不确定为什么，但是是什么导致相机在靠近地形放大时移动得很好，但在缩小时移动得非常慢？这是我平移相机的方式: void CameraPan(){
android - 放大 ViewFlipper
我正在尝试像这样进行缩放:zoom the imageview on the double click in viewflipper in android 我尝试将该代码改编为我的项目，但它不起作用.
javascript - 放大/缩小时的视点大小
$(window).height() 获取页面加载时窗口的高度。但是，在放大/缩小时，我想要新的视点高度。这可能吗？它可以很好地调整普通浏览器的大小，但我想在移动设备上放大/缩小不会触发 $(win
jquery - 放大/缩小时如何保持图像和按钮之间的比例
我正在尝试制作一个显示图像、 block 文本和按钮的面板，与下一个模型上显示的面板保持相似的比率，无论页面大小/缩放比例是多少。我首先尝试使用横写文本的图像(即不对文本、图像和背景使用不同的部分或
javascript - 放大，缩小html中的功能
Blockquote 大家好，请问是否可以在此代码中添加放大、缩小功能？我对 html 很陌生。任何帮助将不胜感激。 Career Center
javascript - 放大/缩小与更改分辨率相同吗？
我有一个由 3 个元素组成的搜索栏。首先 a 保存从下拉列表中选择的值。第二个清除选择的元素第三个供用户在下拉菜单之间切换。我的问题 - 当我缩放超过 100% 时，img 和按钮元素变大了一
html - 放大/缩小时页脚未对齐
我目前遇到网站页脚的问题。当以 100% 大小(正常大小)处理时，页脚对齐得很好。但是，当我调整它的大小时，它完全不对齐并位于左侧，它需要保持居中。屏幕截图: 相关 CSS: /* Dark bl
javascript - 放大 - 缩小不能正常工作
我实现了 3 个按钮来允许用户放大、缩小和返回到默认大小。脚本可以进行放大和缩小，但我还有 2 个问题无法解决。第一个问题: 每次放大时，要缩放的图像仍然到达我的窗口的限制，当图像左右没有任何空间
html - 放大/缩小时如何使阴影框保持在同一个位置？
即使我在网页上放大或缩小，我也试图让 shadowbox 保持在同一个地方。我尝试以百分比而不是像素为单位来制作尺寸，但我不知道应该使用哪种属性组合。这是我想要实现的结果:来自这里的外部阴影框效果h
ios - 放大 ScrollView
我有点困惑。我按照 Apple 的建议放大 ScrollView ，但没有任何反应。代码: import UIKit import SpriteKit class ScrollViewControl
html - 放大/缩小时如何避免标题甚至其他容器弄乱？
我正在尝试通过导航实现类似 Bootstrap 的 header ，但我刚刚发现当我缩小窗口时， header 内的内容变得困惑并且 header 也最小化而不是保持相同的大小。我已经在页眉上使用了
ios - 放大 UITextField
我正在开发一个包含许多 UIView 的 iOS 应用程序。 UINavigation 用于在这些 View 之间导航。我的一个 UIView 包含 UITextField。我的问题是，当我缩放时，
python - pyplot 放大
我正在尝试从 FITS 文件中绘制一些数据，我想知道是否有人知道如何关注绘图轴的某些区域？下面是一些示例代码: import pyfits from matplotlib import pyplot

首页

博学

6Ren·AI

商城

html - 防止在卡片文本较长时使用图像放大引导卡片