bootstrap图像调整大小与容器中的屏幕大小

我有一个引导页面，它给了我调整位置到屏幕大小的瓷砖。这一切都很好，但我有与其他项目一起添加图像到瓷砖的问题。下面的脚本是我的问题的一个例子。第一个图块显示在复选框和标题下方的图像。由于此复选框和标题，图像放置在面板的一半以外。在第二个面板上，我只有图像，并且在面板中调整大小，并适应所有屏幕尺寸。我曾尝试使用CSS来指定图像的高度，但这不适用于所有屏幕尺寸。如果我说高度：50％，那么它适合大屏幕的面板，但在小屏幕上弹出底部。有没有办法解决这个问题。我可以在CSS中指定所有常见屏幕尺寸的图像尺寸。bootstrap图像调整大小与容器中的屏幕大小

HTML脚本

<html> 
 
<head> 
 

 
    <meta charset="utf-8"> 
 
    <title>HomeControl</title> 
 
    <!-- include bootstrap --> 
 
    <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> 
 
\t <link href="test.css" rel="stylesheet"> 
 
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> 
 
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
 
</head> 
 
<body> 
 

 
<div class="row"> 
 
    <div class="col-sm-2 col-xs-4"> 
 
    \t <div id="tile1" class="tile"> 
 
\t \t <p style="color:blue">Boiler On/Off</p> 
 
     <!--Boiler on/off control--> 
 
     <div class="carousel slide" data-ride="carousel"> 
 
      <div class="carousel-inner"> 
 
      <div class="item active"> 
 
       \t <div class="boilerSwitch"> 
 
\t \t \t \t <label class="switch"> 
 
\t \t \t \t <input type="checkbox" name="boiler" id="boiler" value="1"> 
 
\t \t \t \t <div class="slider round"></div> 
 
\t \t \t \t </label></div> 
 
\t \t \t  <img src="../heatingCold.png"/> 
 
\t \t \t \t </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
\t </div> 
 
\t <div class="col-sm-2 col-xs-4"> 
 
\t \t <div id="tile2" class="tile"> 
 
    \t <!--Niamh Room control--> 
 
     <div class="carousel slide" data-ride="carousel"> 
 
      <div class="carousel-inner"> 
 
      <div class="item active"> 
 
\t \t \t <img src="../heatingCold.png" class="img-responsive"/></div> 
 
\t \t \t </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div> 
 
<script type="text/javascript"> 
 
$(document).ready(function() { 
 
    $(".tile").height($("#tile1").width()); 
 
    $(".carousel").height($("#tile1").width()); 
 
    $(".item").height($("#tile1").width()); 
 
     
 
    $(window).resize(function() { 
 
    if(this.resizeTO) clearTimeout(this.resizeTO); 
 
\t this.resizeTO = setTimeout(function() { 
 
\t \t $(this).trigger('resizeEnd'); 
 
\t }, 10); 
 
    }); 
 
    
 
    $(window).bind('resizeEnd', function() { 
 
    \t $(".tile").height($("#tile1").width()); 
 
     $(".carousel").height($("#tile1").width()); 
 
     $(".item").height($("#tile1").width()); 
 
    }); 
 

 
}); 
 

 

 
</script> 
 
</body> 
 
</html>

来源

2016-09-26 user2669997

您在第二图像上忘了class="img-responsive"，或者是故意的？

你应该看看到Bootstrap Media Queries

/* Extra small devices (phones, less than 768px) */ 
/* No media query since this is the default in Bootstrap */ 

/* Small devices (tablets, 768px and up) */ 
@media (min-width: @screen-sm-min) { ... } 

/* Medium devices (desktops, 992px and up) */ 
@media (min-width: @screen-md-min) { ... } 

/* Large devices (large desktops, 1200px and up) */ 
@media (min-width: @screen-lg-min) { ... }

来源

2016-09-26 14:15:01 AlexG

我会看看这个感谢。我确实尝试了img响应，但是这没有奏效。我以前没有用过。通过它的外观调整宽度驾驶室，它做图像的高度 – user2669997

如果容器太小，img-responsive会缩小图像。通过媒体查询，您可以添加在达到特定浏览器窗口宽度时生效的样式 – AlexG

img-responsive不适用于第一张图像。不知道这是否与面板中的复选框有关。如果我在中输入以下内容，我仍然会将图像悬挂在底部，如上图所示。这是在一个大型监视器上 – user2669997

bootstrap图像调整大小与容器中的屏幕大小

回答

相关问题