【问题标题】:Resizing an image with percentage attribute使用百分比属性调整图像大小
【发布时间】:2012-01-04 08:00:20
【问题描述】:

我在使用百分比属性调整图像大小时遇到​​问题。我正在尝试调整图像的大小,使其占其容器的百分比。这在 Chrome 中运行良好,但在 Internet Explorer 和 firefox 中,它会将其大小调整为原始图像的百分比,而不是适合其容器。是否有任何解决方法可以让它在资源管理器和 Firefox 中做我想做的事情?

【问题讨论】:

  • 您能否提供示例代码,最好在 JSFiddle 中?
  • 如果我用宽度替换高度,它会起作用,但这并不真正适合这个特定的应用程序。
  • @user981053 你能举一个jsfiddle.net 的例子吗?

标签: css image resize


【解决方案1】:

在本次测试中:

  • <div> 容器设置为800px
  • 和一个孩子<img>在1000x1000图像width:50%

http://jsfiddle.net/pxfunc/QdmuD/

所有浏览器都以 400x400 显示图像(50% 的容器

在 Chrome(开发版本)、FF 8、IE 9(和 7,8 兼容模式)中测试

【讨论】:

  • 由于某种原因宽度有效,但我实际上需要使用高度属性进行缩放。使用宽度调整大小适用于所有浏览器,但高度仅适用于 chrome。
  • 您的容器是否设置为特定高度?
  • 是的,容器的高度已经设置好了。
  • 您的图像是容器的直接子级吗?
  • 我终于弄明白了,问题是我在一个 div 里面有一个 div,其中子 div 没有指定高度。感谢您一直以来的帮助。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2014-11-12
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多