0
私は画面サイズに合わせて位置を調整するタイルを与えるブートストラップページを持っています。それはすべて素晴らしいですが、私は他のアイテムと一緒に画像をタイルに追加することに問題があります。 以下のスクリプトは私の問題の例です。最初のタイルには、チェックボックスとタイトルの下に表示されるイメージがあります。このチェックボックスとタイトルのため、イメージはパネルの外側に配置されます。 2枚目のパネルでは、画像のみが表示され、パネル内で完全にサイズが変更され、すべての画面サイズに調整されます。 イメージの高さを指定するのにCSSを使用しようとしましたが、これはすべての画面サイズで機能しません。私が高さ：50％と言うと、それは大きなスクリーンのためにパネルの内側に収まるが、小さなスクリーンの底を突き出す。 これを回避する方法はありますか？ CSSで、すべての一般的な画面サイズの画像のサイズを指定できますか？ブートストラップイメージコンテナ内で画面サイズにリサイズする
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>
に見てみる必要があります。私はimg-responsiveを試しましたが、これはうまくいきませんでした。私は以前これを使用していません。それを見て、画像の幅を調整します。 – user2669997
コンテナが小さくなりすぎると 'img-responsive'が画像を縮小します。メディアクエリでは、特定のブラウザウィンドウの幅に達すると有効になるスタイルを追加できます – AlexG
最初の画像ではimg-responsiveが機能していません。これがパネル内にチェックボックスを持つことと関係があるかどうかは不明です。私が
に次のように書いても、上の画像に示すように、画像が下にぶら下がってしまいます。これは大きなモニター上にある –
user2669997