Question

我想在索引页面上以全屏宽度显示图像，高度应该是一页高度可见;比如Apple's website。我通过css完成了它，并通过jQuery扩展它，但没有一个工作。这样做的最佳方式是什么？

＆＃13;

$(document).ready(function() {
  $('#animation img').each(function() {
    var maxWidth = $('animation').width; // div width;
    var width = $(this).width(); // current image width
    var ratio = $('#animation').width / width; // get ratio for scaling image
    if (maxWidth > width) {
      $(this).css("width", ratio * width); // scale  width based on ratio
    }

＆＃13;

#animation {
  width: 100%;
  height: 706px;
  overflow: hidden;
  position: relative;
  box-shadow: 5px 5px 5px black;
}
#animation>img {
  max-width: 100%;
  // height:706px; 

}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="animation">
  <img src="image_5.jpg">// 850px * 450px
</div>

＆＃13;

Answer 1

如果您希望图像为100％宽度，则设置宽度：100％; 在您的示例中，您设置max-width：100％;这意味着图像不能超过100％

还有另一种方法，你可以将宽度设置为100vw，它代表100个视口宽度

Answer 2

如同这个小提琴http://jsfiddle.net/17o3aq7j/2/

#animation>img {
    width:100%;
}

Answer 3

#animation {
   width:100%;
}
#animation img{
   width:100%;
   height:auto;
}

Answer 4

现在正在努力......

 #animation {
        width:100%;
        height:700px;
        overflow:hidden;
        position:relative;
        box-shadow:5px 5px 5px black;

        }

    #animation> img {
        width:100%;
        max-height:700px;   
        }

Answer 5

您的代码存在很多问题。我建议学习使用浏览器的调试工具（可能是通过点击F12启动的）。

函数没有正确关闭，所以整个事情都无法编译。

您正在从$（“＃animation”）中读取.width属性。在最后没有“（）”的情况下，您获得了对该函数的引用，该函数在除以数字时没有做任何有趣的事情。

下面的版本实际上做了一些事情。

$(document).ready(function () {
    $('#animation img').each(function () {
        var maxWidth = $('#animation').width(); // div width;
        console.log(maxWidth);
        var width = $(this).width(); // current image width
        console.log(width);
        var ratio = $('#animation').width() / width; // get ratio for scaling image
        console.log(ratio);
        if (maxWidth >= width) {
            $(this).css("width", maxWidth); // scale  width based on ratio
        }
    });
});

如何以宽度div展开图像：100％？

5 个答案: