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

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 和代码。 (您可以点击按钮放大文本，或拖动窗口变小/变大)

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