Question

我正在使用最新版本的bootstrap。我在调整页面大小并使图像保持正确的宽高比时遇到了麻烦。这是我正在使用的代码：

<div class="row">
    <div class="col-lg-4 col-md-4 col-sm-3 col-xs-12 boximage">
        <img class="img-responsive" title="" src="themes/regulartopheavy/img/gardening.png" alt="" />
    </div>
    <div class="col-lg-8 col-md-8 col-sm-9 col-xs-12 boxholder">
        <div class="homeinfobox"></div>
    </div>
</div>

和css：

    .col-lg-4.col-md-4.col-sm-3.col-xs-12.boximage {
        padding-left: 15px;
        display: block;
        height: 234px;
        position: relative;
    }

    .col-lg-4.col-md-4.col-sm-3.col-xs-12.boximage > img {
        min-height: 100%;
        width: 100%;
    }

我希望我的图片大小与包含文字的“boxholder”的高度相同，并且没有设置的高度，因为当页面调整大小时，文本变得更长，col-lg-4的宽度相同

由于我的设置高度为234px，所以当它全屏时很好，但当文本随着浏览器窗口的减少而增长时，图像不会调整为div的高度。

如何将div的高度设置为始终与'boxholder'div相同，并使图像保持相同的宽高比（如果它溢出div并裁剪图像，则不会受到打扰）？

Answer 1

我没有这个问题的好/简单解决方案，但我有一段时间没有这个问题，我用javascript来解决这个问题。下面是我使用的小提琴和代码。（您可以单击按钮来调整文本大小，或者将窗口拖得更小/更大）

fiddle demo

HTML

<div class="col-1">
I want my image size to be the same height as the 'boxholder' which contains text and doesn't have a set height because when the page resizes the text becomes longer, and the same width of the col-lg-4.

Since i have a set height of 234px its fine when it's full screen but when the text grows as the browser windows is decreased, the image doesn't resize to be the height of the div.
</div>

<div class="col-2">
    <img src="http://i.kinja-img.com/gawker-media/image/upload/kynkw3shz8y768tm7tbw.jpg" alt="some image"/> 
</div>
<div style="clear: both; height: 10px">___</div>

<br/>
<input type="button" value="size up"/>

CSS

img {margin: 0;width: 100%;}
.col-1, .col-2 {width: 45%;float: left;background: #FDFDFD;margin: 1px; border: 1px solid gray;}

的JavaScript

var scaleToFit=function(t,i){var h,e,o,d,n,s=!1,a=t.width,g=t.height,r={};return i.padding&&(s=parseInt(i.padding),i.width-=2*s,i.height-=2*s),e=i.width,o=i.height,h=a/g,d=Math.abs(e-a),n=Math.abs(o-g),r.x=i.x,r.y=i.y,a>e||g>o?a-e>g-o?(r.width=e,r.height=g*(1-d/a)):(r.height=o,r.width=a*(o/g)):d>n?(r.width=a*(1+n/g),r.height=o):(r.height=g*(1+d/a),r.width=e),i.width>r.width&&(r.x=i.x+Math.round((i.width-r.width)/2)),i.height>r.height&&(r.y=i.y+Math.round((i.height-r.height)/2)),s&&(r.x+=s,r.y+=s),r};!function(t){t.fn.scaleToFit=function(){return t.each(this,function(i,h){var e,o,d,n,s=t(h),a=s.parent(),g={},r={};o=a.css("position"),a.css("position","relative"),e=s.position(),d=s.outerWidth(),n=s.outerHeight(),g={x:e.left,y:e.top,width:d,height:n},d=a.outerWidth(),n=a.outerHeight(),r={x:0,y:0,width:d,height:n},g=scaleToFit(g,r),s.css({position:"relative",top:g.y,left:g.x,width:g.width,height:g.height}),a.css("position",o)}),this}}(jQuery);

var sizeChange = function() {
    var newHeight = $(".col-1").height();
    $(".col-2").height(newHeight + "px");
    $("img").scaleToFit();    
}

var scaleUp = function () {
    var font = parseInt($(".col-1").css("font-size"));
    $(".col-1").css("font-size", (font + 1) + "px");
    sizeChange();

}

$(document).ready(function() {
    sizeChange();
    $("img").scaleToFit();
    window.onresize = function() {
        sizeChange();
    }
    $("input").click(function() {
       scaleUp();
    });
});

Bootstrap - 屏幕尺寸减小时的图像响应

1 个答案: