缩放不同宽度的图像以适合行并保持相等的高度 [英] Scale different width images to fit a row and maintain equal height

问题描述

我有三个图片，都是宽度不同，但每个图片都相同高度。

这些图像处于响应行中，使得这三个图像的组合宽度为屏幕宽度的100％，所有图像具有相等的高度，每个图像保持其纵横比，并且图像不被裁剪。 p>

一种方法是为CSS中的每个图像设置不同的百分比宽度，具体取决于每个图像的宽度。但我很好奇一个更聪明的方式，可能使用JavaScript / jQuery，这将是更有效的做这种类型的事情在更大的规模。

解决方案

可以使用css表格布局。

jsFiddle

  body {margin：0;} ul {list-style：没有; 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>  

>

I have three images which are all different widths, but each the same height.

I want these images to be in a responsive row so that the combined width of these three images is 100% the width of the screen, all of the images have equal height, each image maintains its aspect ratio, and the images are not cropped.

One way to do it would be to set a different percentage width for each image in CSS, based upon each image's width according to the others. But I'm curious about a smarter way, probably using JavaScript/jQuery, which would be more efficient for doing this type of thing at a larger scale.

解决方案

This could work - by using css table layout.

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>

这篇关于缩放不同宽度的图像以适合行并保持相等的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！