Fatal编程技术网
  • javascript/
  • Javascript css-100%高度，像素最小高度

Javascript css-100%高度，像素最小高度

javascript html css

Javascript css-100%高度，像素最小高度,javascript,html,height,css,Javascript,Html,Height,Css,我的目标是创建一个容器，它占据了100%的窗口高度，在其中，有一个图像，这也是100%的窗口高度。但是，我还想在容器上设置一个最小高度，这样东西就不会变得太小。 例如： <html> <body style="height: 100%;"> <div style="height: 100%; min-height: 500px;"> <img src="cool.jpg" style="height: 10

我的目标是创建一个容器，它占据了100%的窗口高度，在其中，有一个图像，这也是100%的窗口高度。但是，我还想在容器上设置一个最小高度，这样东西就不会变得太小。
例如：

<html>
    <body style="height: 100%;">
        <div style="height: 100%; min-height: 500px;">
            <img src="cool.jpg" style="height: 100%"/>
        </div>
    </body>
</body>
（我发誓我的网页比这更酷）

好的，一切都很好。直到我们缩小窗口，使
最小高度
生效。此时，
div
会像预期的那样停止收缩，但
img
会随着窗口继续收缩

有什么想法吗？
纯CSS实现是理想的，但如果需要的话，我愿意使用JS。

给图像指定
minheight
而不是容器如何？

给图像指定
minheight
而不是容器如何？

试试这个：

如果您需要更多信息，请使用我对以下问题的回答作为参考 细节和例子

基本上，您缺少的是高度：根标记上的100%，即
。 所有父级都必须设置此项才能使其工作，您在除根元素
之外的所有子级上都执行了此项操作

更新：

添加了最小高度：继承图像以使其在chrome上工作。
它也可以通过删除IMG的父div上的最小高度来修复（但不确定您是否真的需要）。。因此，您可以选择其中一种方式。

试试这个：

如果您需要更多信息，请使用我对以下问题的回答作为参考 细节和例子

基本上，您缺少的是高度：根标记上的100%，即
。 所有父级都必须设置此项才能使其工作，您在除根元素
之外的所有子级上都执行了此项操作

更新：

添加了最小高度：继承图像以使其在chrome上工作。
它也可以通过删除IMG的父div上的最小高度来修复（但不确定您是否真的需要）。。因此，您可以选择一种或另一种方式。

id只需将div背景设置为目标img，然后通过jquery限制调整大小时的高度

<html>
<head>
<style>
div#cont {
background: url(path/to/cool.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-etc-vend-pref-background-size: cover;

}
</style>
</head>
<body style="height: 100%;">

  <div id="cont" style="height: 100%; min-height: 500px;">
    <img id="bg" src="cool.jpg" style="height: 100%"/>
  </div>


<script>
  $(window).load(function(){
  $(window).resize(function(){
   var  win = $(window),
       cont = $('div.cont'),
        min = 500;

    if (win.height() <= min){
      cont.height(min);
    } else {
      cont.height(win.height());
    }

 });

});
</script>
</body>


分区（续）{
背景：url（path/to/cool.jpg）无重复中心固定；
-webkit背景尺寸：封面；
-etc供应商首选背景尺寸：封面；
}
$（窗口）。加载（函数（）{
$（窗口）。调整大小（函数（）{
var win=$（窗口），
cont=$（'div.cont'），
最小值=500；

如果（win.height（）id）只是将div背景设置为目标img，则通过jquery限制调整大小时的高度


<html>
<head>
<style>
div#cont {
background: url(path/to/cool.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-etc-vend-pref-background-size: cover;

}
</style>
</head>
<body style="height: 100%;">

  <div id="cont" style="height: 100%; min-height: 500px;">
    <img id="bg" src="cool.jpg" style="height: 100%"/>
  </div>


<script>
  $(window).load(function(){
  $(window).resize(function(){
   var  win = $(window),
       cont = $('div.cont'),
        min = 500;

    if (win.height() <= min){
      cont.height(min);
    } else {
      cont.height(win.height());
    }

 });

});
</script>
</body>




分区（续）{
背景：url（path/to/cool.jpg）无重复中心固定；
-webkit背景尺寸：封面；
-etc供应商首选背景尺寸：封面；
}
$（窗口）。加载（函数（）{
$（窗口）。调整大小（函数（）{
var win=$（窗口），
cont=$（'div.cont'），
最小值=500；

如果（win.height（）这就是你想要的吗




.container{高度：100%；宽度：100%；}
.content{高度：100%；}
.内容img{高度：100%；最小高度：500px；宽度：100%；}



图像高度不应低于500px。
这就是你想要的吗




.container{高度：100%；宽度：100%；}
.content{高度：100%；}
.内容img{高度：100%；最小高度：500px；宽度：100%；}



图像高度不应低于500px。
将
min height
也赋予
img
。或者仅仅赋予
body
标签。您可以添加一个提琴来显示问题吗？好主意：看起来不错。您在哪个浏览器上测试？将
min height
也赋予
img
。或者仅仅赋予
body
标签。您可以给我添加一个提琴吗显示问题？好主意：我觉得不错。你在哪个浏览器上测试？对我不起作用（无论如何在Chrome 25中）。最小宽度为
的div仍然保持在500px，但其他所有内容继续收缩到窗口高度的100%。@Sean我明白了，我没有在Chrome上检查它。但它现在应该可以工作了。请再次检查。添加了新小提琴的链接，忘了更早放置它。对我不起作用（无论如何在Chrome 25中）。最小宽度为
的div仍然保持在500px，但其他所有东西都继续缩小到窗口高度的100%。@Sean我明白了，我没有在Chrome上检查它。但它现在应该可以工作了。请再次检查。添加了新小提琴的链接，忘了早些放。尽管我最喜欢@linus的答案，我个人也会这么做，这是另一种解决方案。虽然我最喜欢@linus的答案，我个人也会这么做，但这是另一种解决方案。