【问题标题】: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。谢谢@布鲁诺
  • 谢谢,但在我的情况下它更复杂(几个 div),这不起作用。此外,有时缩略图是纵向的,有时是横向的。

标签: html css image


【解决方案1】:

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

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

【讨论】:

  • 问题要求图像需要保持其纵横比。如果图像比 div 小,它也不会完美对齐。
  • 此代码示例已更新为使用保持纵横比的max-widthmax-height
猜你喜欢
  • 2013-06-26
  • 2012-04-15
  • 1970-01-01
  • 2022-10-25
  • 1970-01-01
  • 2012-05-01
相关资源
最近更新 更多