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

Question

我正在使用最新版本的引导程序。我在调整页面大小并将图像保持在正确的纵横比时遇到问题。这是我正在使用的代码：

<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();
    });
});