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 的高度，全屏时没问题，但是当文本随着浏览器 windows 缩小而变大时，图像不会调整为高度div.

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

Answer 1

我没有针对这个问题的 good/simple 解决方案，但我自己也有一段时间遇到过这个问题，我使用 javascript 来解决这个问题。下面是 fiddle 和我使用的代码。（可以点击按钮放大文字，或者拖动windowsmaller/bigger）

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 - 屏幕尺寸减小时图像响应

Bootstrap - image responding when screen size decreases

html

css

twitter-bootstrap

image-resizing