我有三个图像都是不同的宽度,但每个高度相同.
我想让这些图像在响应行中,这样三个图像的组合宽度是屏幕宽度的100％,所有的图像都具有相同的高度,每个图像保持其纵横比,并且图像不被裁剪.
一种方法是根据每个图像的宽度根据其他图像在CSS中为每个图像设置不同的百分比宽度.但是我对一个更聪明的方式好奇,可能使用JavaScript / jQuery,这将更有效地在更大的范围内进行这种类型的事情.
解决方法
这可以工作 – 使用css表格布局.
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>
