将图像调整为固定内容答案

【问题标题】：adjust image to fixed content将图像调整为固定内容
【发布时间】：2016-11-06 02:42:24
【问题描述】：

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

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

这是我得到的：

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

有没有什么方法可以让img标签中加载的任何图像保持比例并且都具有相同的高度？

【问题讨论】：

标签： html css image

【解决方案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" />

【讨论】：

【解决方案2】：

请尝试以下方法： 1.将图片放入'div's 例如。

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

调整样式表中的高度：

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

}

调整 'div' 的宽度以填充页面的四分之一： .图像容器{ 宽度：25%； }

【讨论】：