Bootstrap图片缩放调整：如何限制卡片内箭头图片的最小尺寸？

我懂你现在的困扰——全屏状态下箭头图片显示正常，但一缩小到移动设备这类小屏尺寸，图片就跟着栅格容器越缩越小，最后直接看不见了。这根源在于你给图片设置的是相对父元素的百分比高度，当屏幕缩小，父容器的高度被Bootstrap栅格压缩后，图片的50%高度自然就变得极小。下面给你几个实用的解决办法：

方法1：给图片直接设置最小高度（最直接有效） #

给箭头图片的样式里添加min-height属性，指定一个你能接受的最小显示高度（比如40px），这样就算父容器再小，图片也不会低于这个尺寸。同时搭配width: auto来保持图片的宽高比，避免变形。

修改后的图片代码示例：

<img style='height: 50%; min-height: 40px; width: auto;' 
     src='uparrow' 
     onmouseover=this.src='differentuparrow' 
     onmouseout=this.src='uparrow' 
     border='0'/>
<br><br>
<img style='height: 50%; min-height: 40px; width: auto;' 
     src='downarrow' 
     onmouseover=this.src='differentdownarrow' 
     onmouseout=this.src='downarrow' 
     border='0'/>

方法2：给父容器设置最小高度 #

如果你不想单独给图片加样式，也可以给图片的父元素（也就是那个h4.card-header）设置最小高度，让父容器不会被压缩得太小，这样图片的50%高度也能保持可见：

<h4 class='card-header' style='text-align:center;height:100%; min-height: 100px;'>

这个最小高度数值可以根据你图片的实际大小调整，确保50%的高度足够显示出箭头。

额外提醒：修复代码语法错误 #

注意你代码里第二个箭头图片的style属性有引号嵌套错误：

<!-- 错误写法 -->
<img style='height:50%; src='downarrow' ...>
<!-- 正确写法：把style和src属性分开 -->
<img style='height:50%;' src='downarrow' ...>

这个错误可能会导致图片样式失效，记得修正哦。

这样调整后，不管屏幕怎么缩小，箭头图片都会保持你设定的最小尺寸，不会再消失啦。

内容的提问来源于stack exchange，提问作者user5836372