将图像调整为固定内容

Question

我正在处理具有固定宽度和宽度的img标签。高度。

问题是a有一组图像，每个图像都有自己的尺寸，因此在生成的视图中，其中一些图像的高度不同，保持宽度不变。

这就是我得到的：

......这就是我想要完成的事情：

有没有办法在img标签中加载任何图像保持比例并且都具有相同的高度？

Answer 1

你可以使用css并将宽度和高度的属性设置为你想要的

img 
{
  width : 150px;
  height : 150px;
}

<img src="https://static.pexels.com/photos/57825/pexels-photo-57825.jpeg" alt="no image available" />
<img src="https://static.pexels.com/photos/149941/pexels-photo-149941.jpeg" alt="no image available" />
<img src="https://static.pexels.com/photos/163145/laptop-computer-coffee-yellow-163145.jpeg" alt="no image available" />
<img src="https://static.pexels.com/photos/7107/notebook-hero-workspace-minimal.jpg" alt="no image available" />

Answer 2

请尝试以下方法： 1.将图像放入＆＃39; div  例如。

<div class='image-container'>
       <img src="yourimage.jpg">
     </div>

1. 调整样式表中的高度：

   .image-container img{
     width:100%;
     height:100%;
   

   }

2. 调整＆f; div的宽度以填充页面的四分之一：   图像配容器{      宽度：25％; }