完全可见的响应式图像

Question

我有一个标题图像，当屏幕宽度短于高度时，我希望屏幕宽度为 100%，当屏幕高度短于高度时，我希望屏幕高度为 100%宽度。有没有办法让我做到这一点？

编辑——有些人想要所有相关的代码，所以就在这里！

HTML

<div id="home-slider" class="carousel slide carousel-fade" data-ride="carousel">
  <div class="carousel-inner">
    <div class="item active" style="background-image: url(images/logo.png)" >
      <div class="caption">
        <h1 class="animated fadeInLeftBig">The *** Organization  </h1>
        <p class="animated fadeInRightBig">***</p>
        <a data-scroll class="btn btn-start animated fadeInUpBig" href="#rescue">***</a>
      </div>
    </div>
  </div>
</div>

CSS

#home-slider {
  overflow: hidden;
  position: relative;
  attachment: fixed;
  size: cover;
  repeat: no-repeat;
  width: 100%;
  height: 100vh;
  max-width: 100%;
  height: auto;

}



#home-slider .caption {
  position: absolute;
  top: 50%;
  margin-top: -104px;
  left: 0;
  right: 0;
  text-align: center;
  text-transform: uppercase;
  z-index: 15;
  font-size: 18px;
  font-weight: 300;
  color: #fff;
  vertical-align: center;
  height: 100vh;
  font-size: 2em;
  background-size: contain;

}

#home-slider .caption h1 {
  color: #fff;
  size: 72px;
  font-weight: 800;
  margin-bottom: 30px;
  vertical-align: center;

}





.caption .btn-start {
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  padding:14px 40px;
  border: 2px solid #6e6d6c;
  border-radius: 4px;
  margin-top: 40px;
  vertical-align: center;
}

.caption .btn-start:hover {
  color: #fff
}

.carousel-fade .carousel-inner .item {
  opacity: 0;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
  width: 100%;
  /*  just in case if I want the image to be "parallax"
  background-attachment: fixed;
  */
  background-position: center;
  background-color: #6e6d6c;

}



.carousel-fade .carousel-inner .active {
  opacity: 1;
  background-size: 100%;
}

.carousel-fade .carousel-control {
  z-index: 2;
}

js

var slideHeight = $(window).height();
    $('#home .item').css('height',slideHeight);

    $(window).resize(function(){'use strict',
        $('#home .item').css('height',slideHeight);
    });

    $(function() {
var width = $(window).width();
var height = $(window).height();
if( width < height  ) {
        $('#home .item').css({width:'initial',height:height+'px'});
    }
    });

        var logoFix = function() {
              if( $(window).width() < $(window).height()  ) {
                $('.item').css('background-size','auto 100%');
              }
              else {
                $('.item').css('background-size','100%');
             }
        }
           $(function() {
             logoFix();
           });

Answer 1

是的，

您可以使用

检测屏幕分辨率

window.screen.availHeight    
window.screen.availWidth

http://www.javascriptkit.com/howto/newtech3.shtml

然后你需要使用 JS 来做一个基本的 if 语句来调整图像的大小。 （非常基本的例子）

if (window.screen.availHeight > window.screen.availWidth){
height: 100%;
}

if (window.screen.availHeight > window.screen.availWidth){
width: 100%;
}

这是一个非常基本的例子，如果你复制粘贴肯定行不通。这只是为了让您了解您必须做什么。

Image sizing

Answer 2

原来您的图像是 .因此，您不能直接调整该图像的大小。你必须使用它的背景属性来实现你所追求的。

var logoFix = function() {
      if( $(window).width() < $(window).height()  ) {
        $('.item').css('background-size','auto 100%');
      }
      else {
        $('.item').css('background-size','100%'); 
     }  
}
   $(function() {
     logoFix();
   });

如果您希望徽标大小响应手动调整窗口大小，请添加以下内容：

$(window).resize(function(){
  logoFix();
});