How to get multiple images to auto resize and stay centered within a div

前端未结

关注

 2  366

情深已故 2021-01-06 02:07

I am trying to get the multiple university logo images in a row to scale down as the browser width gets smaller and not overflow its container div, just like I do with the b

2条回答

一生所求 (楼主)

2021-01-06 02:50

Not sure what HTML you've already got, but if the images are each wrapped inside a
or

then you can use display: table; and display: table-cell to ensure that no matter how many images, they'll always fit the width correctly.

body {
  margin: 0;
}

#partners {
  height: 105px;
  background-color: #eee;
  white-space: nowrap;
  width: 100%;
  display: table;
}

.logo-image {
  vertical-align: middle;
  padding: 13px;
  display: table-cell;
}

.logo-image img {
  max-width: 100%;
}

Working demo here.

0 讨论(0)

查看其它2个回答