javascript – 缩放不同宽度的图像以适应一行并保持相等的高度

我有三个图像都是不同的宽度,但每个高度相同.

我想让这些图像在响应行中,这样三个图像的组合宽度是屏幕宽度的100％,所有的图像都具有相同的高度,每个图像保持其纵横比,并且图像不被裁剪.

一种方法是根据每个图像的宽度根据其他图像在CSS中为每个图像设置不同的百分比宽度.但是我对一个更聪明的方式好奇,可能使用JavaScript / jQuery,这将更有效地在更大的范围内进行这种类型的事情.

解决方法

这可以工作 – 使用css表格布局.

jsFiddle

body {
  margin: 0;
}
ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: table;
  border-collapse: collapse;
  width: 100%;
}
li {
  display: table-cell;
}
img {
  display: block;
  width: 100%;
  height: auto;
}

<ul>
  <li><img src="//dummyimage.com/100x100/aaa" /></li>
  <li><img src="//dummyimage.com/200x100/bbb" /></li>
  <li><img src="//dummyimage.com/300x100/ccc" /></li>
</ul>

原文地址：https://www.jb51.cc/js/153173.html