Question

我有两个带有@Override public void onActivityResult(int requestCode, int resultCode, Intent data) { super.onActivityResult(requestCode, resultCode, data); Log.d(TAG, "onActivityResult: " + data.getStringExtra("STRING")); // or Log.d(TAG, "onActivityResult: " + data.getExtras().getString("STRING")); }和col-xs-8的引导列。两者都包含相同高度的图像。当我尝试减小浏览器的宽度时，第二个图像与第一个图像相比变得更短。我想要两个相同的高度。代码如下所示。提前谢谢。

＆＃13;

col-xs-4

＆＃13;

.offer-row .col-xs-8{padding-right: 8px;}
.offer-row .col-xs-4{padding-left:7px;}

＆＃13;

Answer 1

随着屏幕尺寸的减小，尺寸将减小，以防止您必须编写媒体查询并使您的网页响应。例如，如何编写媒体查询，请查看给定的链接。

How to write media query for maiking reponsive websites

Answer 2

这将使高度固定。

＆＃13;

.img-fix{
max-width:100%;
height:100%;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<body>
<div class="row offer-row">
  <div class="col-xs-8">

    <img src="http://via.placeholder.com/825x500" class="img img-fix">

  </div>
  <div class="col-xs-4">
    <img src="http://via.placeholder.com/410x500" class="img img-fix">
  </div>
</div>
</body>

＆＃13;

Answer 3

我通过添加以下css来解决问题

.row-eq-height {display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;}.offer-row .col-sm-4{padding-left:7px;overflow-y: hidden;}
.offer-row .col-sm-4 img{min-height:100%; }
.offer-row .col-xs-8{padding-right: 8px;}
.offer-row .col-xs-4{padding-left:7px;}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<body>
<div class="row offer-row row-eq-height">
  <div class="col-xs-8">

    <img src="http://via.placeholder.com/825x500" class="img img-fix">

  </div>
  <div class="col-xs-4">
    <img src="http://via.placeholder.com/410x500" class="img img-fix">
  </div>
</div>
</body>

在引导列中调整图像大小

3 个答案: