【问题标题】:How to resize to the img tag appropriate?如何将大小调整为适当的 img 标签?
【发布时间】:2011-08-10 13:17:12
【问题描述】:

我想在小窗口中显示图像,但我需要保存图像的比例(我仍然希望人们可以知道它是什么)。 例如,假设图像是 1000X200 像素,并且有一个 div 定义为: 高度:100px; 宽度:100px; 所以我希望图像会这样写:

<img src="asd.jpg" height=20 width=100 />

而不是

<img src="asd.jpg" height=100 width=100 />

还是不

<img src="asd.jpg"/>

然后是卷轴..

我可以使用百分比,但我该怎么做..(它甚至可以单独使用百分比吗?)

【问题讨论】:

    标签: html css image resize


    【解决方案1】:

    如果您的父级div 有一组widthheight,您可以将img 的最大宽度和最大高度设置为100%

    div {
      width: 100px;
      height: 100px;
    }
    div > img {
      max-width: 100%;
      max-height: 100%;
    }
    

    (对于移动浏览器等而言,将图像的最大宽度设为 100% 始终是一个好习惯。)

    【讨论】:

    • 这不会保留图像的纵横比,这是问题所要求的。
    【解决方案2】:

    如果您使用 javascript,您可以简单地获取图像的高度和宽度,然后将一个除以另一个得到一个比率,然后将 div 的高度和宽度与该比率相乘,然后将 img 尺寸设置为那些数字。

    显然这是一种非常简单的说法,但我也不确定你是想用 JS 来做这件事,还是使用严格的 CSS 解决方案。

    【讨论】:

    • 问题是我试图避免 js。
    • 如果您愿意使用 max-width 和 max-height ,那无论如何都是更好的解决方案。
    【解决方案3】:

    如果您在 CSS 中设置 max-heightmax-width,现代浏览器会将其限制为该大小但保持纵横比正确:

    <img src="asd.jpg" style="max-height: 100px; max-width: 100px;" />
    

    【讨论】:

    • 你能告诉我支持的浏览器吗?这看起来和我需要的完全一样。
    • @user719001 应该适用于任何 IE7+。请参阅w3schools.com/Css/pr_dim_max-height.asp 如果您需要 IE6,您将进入一个充满伤害的世界:\
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-03-20
    • 2012-01-06
    • 1970-01-01
    • 2013-05-27
    • 2011-02-20
    相关资源
    最近更新 更多