Question

我有这个样本：

代码HTML：

<div class="row">
    <div class="col-md-4">
        <img src="http://rochester.motorcitynewengland.com/img/cars/kia-forte.jpg" alt="2015 Kia Forte" title="2015 Kia Forte" class="img-responsive">
    </div>  

    <div class="col-md-4">
        <img src="http://rochester.motorcitynewengland.com/img/cars/chrysler-300C-min.jpg" alt="2015 Kia Forte" title="2015 Kia Forte" class="img-responsive">
    </div>  


    <div class="col-md-4">
        <img src="http://rochester.motorcitynewengland.com/img/cars/dodge-dart-min.jpg" alt="2015 Kia Forte" title="2015 Kia Forte" class="img-responsive">
    </div>  
</div>

CODE CSS：

img{
    max-height: 355px;
    margin-bottom: 0.5em;
    text-align:center;
}

问题是，如果你调整窗口大小......第一张图像比其他两张图像高。我怎样才能始终保持所有3张图片的高度相同？但图像要有高度和宽度的响应。

提前致谢！

Answer 1

要保持高度，你可以做的一件事就是将你的图像设置为流畅的，但要保持它们的纵横比;有几个关于如何做到这一点的教程，例如： http://www.goldenapplewebdesign.com/responsive-aspect-ratios-with-pure-css/或https://www.sitepoint.com/maintain-image-aspect-ratios-responsive-web-design/

缺点是如果图像的纵横比不是16：9

，图像将会被裁剪

Answer 2

所以我建议的是为3 div制作3 css类。

cursor = activity.getContentResolver().query(android.provider.MediaStore.Images.Media.EXTERNAL_CONTENT_URI, new String[]{MediaStore.MediaColumns.DATA}, MediaStore.Images.Media.DATE_TAKEN + ">=? and " + MediaStore.Images.Media.DATE_TAKEN + "<=?", new String[]{"" + givendate_timestamp, "" + nextdate_timestamp}, MediaStore.Images.Media.DATE_TAKEN + " DESC");

在css中你可以将div的背景设置为你的图像。

<div class="col-md-4 xyz1></div>
<div class="col-md-4 xyz2"></div>
<div class="col-md-4 xyz3"></div>

依旧......

Answer 3

您可以使用每个div的背景图片

<div class="row">
  <div class="col-md-4 img1 img">
  </div>  

  <div class="col-md-4 img2 img">
  </div>  

  <div class="col-md-4 img3 img">
  </div>  

</div>

<强> CSS：

.img1{
  background:url(http://rochester.motorcitynewengland.com/img/cars/kia-forte.jpg);

}
.img2{
  background:url(http://rochester.motorcitynewengland.com/img/cars/chrysler-300C-min.jpg);

}
.img3{
  background:url(http://rochester.motorcitynewengland.com/img/cars/dodge-dart-min.jpg);

}

.img{
    height: 355px;
    background-size:cover;
    background-position:center;

}

working demo

Answer 4

将每个图像放在div类中，并使css成为最大高度：＆＃34; ... px＆＃34; ans将宽度设置为自动

如何使图像响应高度？

4 个答案: