Question

我正在努力使网站响应。我已经为所有div使用了自动高度。但是，对于特定的div，我必须使用固定高度来满足浏览器的所有大小。但是，我不想在每个尺寸的设备/浏览器的媒体查询中手动设置高度，而是想自动/动态地进行。可能是javascript / jQuery可以做到的。但是，我对javascript / jQuery知之甚少。所以，我想要你的帮助。我的容器div的最大宽度：1280px;我有一个名为“#artwork”的子div，其初始尺寸为：1065 * 695px。将base作为容器div的max-width和#artwork div的初始高度，我希望为每次调整浏览器大小时自动调整#artwork。

我不能给“#artwork”高度：auto，因为“#artwork”div上有很多大图像。但是，通过javascript，只有一个图像正常显示，通过向下滚动，人们可以逐个看到下一个图像。如果我给高度：auto或使用minimum-height到“#artwork”，则会显示所有图像。我已经通过媒体查询手动将“艺术品”div高度放在不同类型的css文件中。但是，我想自动完成，所以这个比例对于每个设备的每种尺寸的浏览器都是完美的。

以下是页面示例：
[已删除死链接]

#container {
   max-width: 1280px;
   margin: 0 auto;
   padding: 0;
   overflow: hidden;
   font-family: GandhiSansBold;
   position: relative;
}

#artwork {
   /*width: 1065px;*/
   width: 83.203%;
   height: 695px;
   margin: 0;
   float: left;
   overflow: hidden;
   margin-bottom: 10px;
}

请保证，如果浏览器尺寸太大，＃artwork高度不能超过高度：695px，无论如何都要自动调整大小。

Answer 1

http://f6design.com/journal/2011/10/18/responsive-elements-that-retain-their-aspect-ratio/

问题归结为在流体设计中保持纵横比。这条路已经走得很好，并且存在许多漂亮的解决方案。我在上面列出一个。如果它也解决了嵌套div元素的问题，请告诉我。

Answer 2

您需要在调整大小时计算浏览器的新高度，然后将新高度设置为图像：

var TO = false;
var resizeEvent = 'onorientationchange' in window ? 'orientationchange' : 'resize';
$(window).bind(resizeEvent, function() {
  TO && clearTimeout(TO);
  TO = setTimeout(resizeImage, 200);
});
function resizeImage(){
  // browser resized, we count new width/height of browser after resizing
  var height = window.innerHeight || $(window).height();
  // var width = window.innerWidth || $(window).width();
  // you need to change here #artwork height
  var imgHeightInPercent = 30; // browser height is 100%
  var desiredHeight = (height * imgHeightInPercent) / 100;
  // finally we changed #artwork height
  $('#artwork').height(desiredHeight); 
}

Answer 3

最好的方法是使用CSS和百分比值，但是现在我们将使用jQuery。

这是一个使用jQuery并处理调整大小事件的示例：

(function() {
    var _viewport = $(window),
        _event = 'onorientationchange' in window ? 'orientationchange' : 'resize';

    //add a namespace to event
    _event += ".boxsize";

    //creates the event handler by namespace
    _viewport
        .off(_event)
        .on(_event, fnResizer);

    function fnResizer (e) {
        var gap = 40,
            winWidth = _viewport.width(),
            winHeight = _viewport.height(),
            //add your calculations
            boxWidth = winWidth - gap,
            boxHeight = winHeight - gap;
        //sets the new size of the boxes
        $('#artwork, #container').css({
            "width": boxWidth,
            "height": boxHeight
        });
    }
}());

HTML：

<div id="container">
    <div id="artwork"></div>
</div>

如何根据浏览器的重新设置沿div宽度自动调整div高度

3 个答案: