使图像适应容器大小保持纵横比

Posted 2023-03-06

【中文标题】使图像适应容器大小保持纵横比

【英文标题】：Fit images to container size keeping aspect ratio

【发布时间】：2012-10-06 10:01:24

【问题描述】：

我找不到在不更改其各自纵横比的情况下将this page 上的缩略图显示为适合相同尺寸（高度：122 像素和宽度：178 像素）的框的方法。 我不知道缩略图的原始尺寸。 如您所见，我有几个嵌套的divs，而.picture1 类的那个具有这些尺寸，但图像不适合这个div。 你能帮帮我吗？

谢谢

【问题讨论】：

这只是一个 html/css 解决方案还是您正在考虑使用 javascript？

如果只是html/css更好，但我可以做jquery。谢谢@布鲁诺

看看下面的***.com/questions/757782/…

谢谢，但在我的情况下它更复杂（几个 div），这不起作用。此外，有时缩略图是纵向的，有时是横向的。

在这种情况下***.com/questions/3971841/…

【参考方案1】：

这真的是个问题吗。检查您的页面后非常简单，如果您添加以下类，则图像适合容器内

    .work-view img 
      max-height: 100px;
      padding: 5px 5px 2px;
      max-width: 150px;

【讨论】：

问题要求图像需要保持其纵横比。如果图像比 div 小，它也不会完美对齐。

此代码示例已更新为使用保持纵横比的max-width 和max-height。