【问题标题】:Image resizing with CSS to fit into a container使用 CSS 调整图像大小以适合容器
【发布时间】:2016-01-06 17:33:54
【问题描述】:

我正在寻找使用 CSS 调整 <img> 元素大小的解决方案:

  1. 横向方形纵向必须保持纵横比 图片
  2. 必须在高档(收缩)和低档(拉伸)场景中工作
  3. 除了 Chrome/FF/Safari/Opera 还必须在 IE 10/Edge 中工作(IE 8+ 支持很不错)

我在这里找到的所有解决方案(如thisthis)都不能按要求工作。使用 object-fit: containThe best one 在 IE 中不起作用。没有javascript可以吗?

【问题讨论】:

    标签: css image image-resizing aspect-ratio


    【解决方案1】:

    您只需要为您的 img 元素设置一个最大宽度和最大高度。 如果你的图片比容器大,这个技巧应该以正确的比例调整你的图片大小。

    我这里有一个例子:

    img {
      display: block;
      max-height: 100%;
      max-width: 100%;
      width: auto;
      height: auto;
      margin: auto;
    }
    

    http://codepen.io/Himechi90/pen/MaoEWg

    祝你好运!

    【讨论】:

    • 这在图像分辨率较低时不起作用,即需要拉伸以填充任何可用空间。
    • 非常正确。这就是为什么我在评论中说“假设您的图像比容器大..”但是感谢您指出!
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2021-09-20
    • 1970-01-01
    • 1970-01-01
    • 2020-08-22
    • 2020-06-03
    • 1970-01-01
    • 2015-05-06
    相关资源
    最近更新 更多