引导4容器的固定高度

Question

我有以下html结构：

<div class="container" style="background-color:#FFFFFF;height:100px;">
<div class="row hidden-sm-down" style="display:block;height:100px;" align="center">
<a href="http://www.pse.ruhr-uni-bochum.de/" class="col-md-2 col-lg-2" target="_blank" style=""> <img style="max-height:50px;margin:2em 3em 1em 3em;" class="card card-block hidden-sm-down" src="http://digill-nrw.de/wp-content/uploads/2017/09/Logo_RUB_BLAU_cmyk_trans.png"> </a>

<a href="http://www.dokoll.tu-dortmund.de/cms/de/dokoll/" class="col-md-2 col-lg-2" target="_blank" style=""> <img style="max-height:50px;margin:2em 3em 1em 3em;" class="card card-block hidden-sm-down" src="http://digill-nrw.de/wp-content/uploads/2017/09/tud_logo_rgb_tranz.png"> </a>

<a href="https://www.zlb.uni-due.de/" class="col-md-2 col-lg-2" target="_blank" style=""> <img style="max-height:50px;margin:2em 3em 1em 3em;" class="card card-block hidden-sm-down" src="http://digill-nrw.de/wp-content/uploads/2017/09/logo_claim_rgb_72dpi.png"> </a>

<a href="http://zfl.uni-koeln.de/" class="col-md-2 col-lg-2" target="_blank" style=""> <img style="max-height:50px;margin:2em 3em 1em 3em;" class="card card-block hidden-sm-down" src="http://digill-nrw.de/wp-content/uploads/2017/07/logo_köln.png"> </a>

<a href="https://www.uni-muenster.de/Lehrerbildung/" class="col-md-2 col-lg-2" target="_blank" style=""> <img style="max-height:50px;margin:2em 3em 1em 3em;" class="card card-block hidden-sm-down" src="http://digill-nrw.de/wp-content/uploads/2017/09/logo_unimünster.png"> </a>        

</div>
</div>

目前，当屏幕变小时，它会将我的图像包装在新的行中。我需要避免这种情况，让图像变得更小，以适应屏幕的宽度。我把那行隐藏在小型设备上，所以它应该只在中型和向上设备上工作。

有什么办法解决这个问题吗？我尝试了所有的解决方案。

Answer 1

您可以使用img响应类。

<img class="img-responsive" src="yourimageroute">

看看这把小提琴