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圖像調整大小與容器中的屏幕大小

回答

相關問題