调整 Bootstrap 图像大小

Posted

技术标签:

【中文标题】调整 Bootstrap 图像大小【英文标题】:Adjust Bootstrap image resizing 【发布时间】:2018-07-03 07:21:41 【问题描述】:

我正在尝试制作一个卡片 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/

出于保密原因,我不得不删除图片的原始来源

【问题讨论】:

请分享您的代码。 请编辑您的问题并发布一个完整的代码 sn-p,我们可以使用它来测试和解决问题。否则变量太多了。 jsfiddle.net/5a87h3ky 我为它制作了一个 jsfiddle,但由于某种原因,它看起来与我的实时实现完全不同 【参考方案1】:

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

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

【讨论】:

【参考方案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 图像大小的主要内容,如果未能解决你的问题,请参考以下文章

使用 Bootstrap 在模态框内调整轮播大小

使用 JS、JQuery 或 HTML5 调整图像大小

响应式 Bootstrap Jumbotron 背景图像

html Bootstrap Custom Select通过Selectpicker(Bootstrap select)https://github.com/silviomoreto/bootstra

根据图像的宽度自动调整 div 的各个部分的大小?

你想要了解Bootstrap栅格系统的都在这儿