Question

我正在尝试制作一张卡片div，里面有两个图像，一个向上箭头和一个向下箭头。

在全屏显示时，图像看起来还不错，但是由于Bootstraps响应式设计，当我使用chrome中的开发者控制台降低页面分辨率时，图像变得越来越小，直到它们无法在小视图上看到设备，例如移动设备。

如何限制图像的小小？

感谢。

<div class='col-11 col-xs-11 col-md-5 col-lg-5' style='background-color:#dfdfdf;border-radius:5px;margin-right:10px;margin-bottom:10px;'>

  <div class='col-2 col-xs-2 col-md-2 col-lg-2'>
      <h4 class='card-header' style='text-align:center;height:100%;'> 
        <img style='height:50%;'src='uparrow' onmouseover=this.src='differentuparrow' onmouseout=this.src='uparrow' border='0'/>
        <br><br>
        <img style='height:50%; src='downarrow' onmouseover=this.src='differentdownarrow' onmouseout=this.src='downarrow' border='0'/>
      </h4>
   </div>

  <div class='col-8 col-xs-8 col-md-8 col-lg-8'>
     <h4 class='card-header' style=''><u>Title</u></h4>
     <div class='card-body' style=''>
       <p class='card-title'>Description</p>
       <p class='card-text' style='display: inline-block; bottom:0;'>Points: 0<br>Replies: 0</p>
     </div>
  </div>

  <div class='col-2 col-xs-2 col-md-2 col-lg-2' style='float:right;'>
     <i class='fa fa-pencil fa-5' aria-hidden='true'> Edit</i>
     <br> <i class='fa fa-trash fa-5' aria-hidden='true'> Delete</i>
  </div>

</div>

https://jsfiddle.net/5a87h3ky/

由于机密性，我不得不删除图片的原始来源

Answer 1

您可以使用min-width: px;属性设置图像的最小尺寸。

这将防止图像变得小于给定大小。

Answer 2

有几种方法可以用CSS或HTML控制图像的大小。要控制箭头，可以使用min-height和max-height，还可以设置min-width和max-width。

例如，使用image_arrow_up.jpg，你可以用：

设置它的大小

<head>
<style>
div {
    max-height: 600px;
    min-height: 400px;
    max-width: 400px;
    min-width: 200px;
}
</style>
</head>

另一种方法是使用百分比，尽管这不像min和max那样具体：

<!DOCTYPE html>
<html>
<head>
<style>
html, body {
    height: 100%;
}

img.one {
    height: auto;
    width: auto;
}

img.two {
    height: 50%;
    width: 50%;
}
</style>
</head>
<body>

另一种选择是将CSS与image-set函数一起使用，或与scrset + sizes一起使用：

.img {
  background-image: url(examples/images/image-384.jpg);
  background-image: 
    -webkit-image-set(
      url(examples/images/image-384.jpg) 1x,
      url(examples/images/image-768.jpg) 2x,
    );
  background-image: 
    image-set(
      url(examples/images/image-384.jpg) 1x,
      url(examples/images/image-768.jpg) 2x,
    );
}

它还有助于确保原始图像的大小适当。例如，将原始箭头图像设置为“常规”桌面监视器，而不是可能以意外方式缩小的超大箭头。或者，您可以使用图像管理服务（例如Cloudinary或3Scale）来创建responsive quality图像。

调整Bootstrap图像大小调整

2 个答案: