使用 CSS 按比例调整图像大小？ [复制]答案

【问题标题】：Resize image proportionally with CSS? [duplicate]使用 CSS 按比例调整图像大小？ [复制]
【发布时间】：2010-10-21 17:33:07
【问题描述】：

有没有办法仅使用 CSS 按比例调整（缩小）图像的大小？

我正在使用 JavaScript 方式，但只是想看看 CSS 是否可行。

【问题讨论】：

Ethan Marcotte 最近investigated this issue very thoroughly。简短的回答是肯定的，这是可能的，但不是在所有浏览器中。
如果不想烧带宽，slimmage.js可以帮忙；它读取生成的max-width 值以调整请求的图像尺寸。
图片的宽度可以设置，高度自动调整。

标签： html css image-resizing

【解决方案1】：

<img style="width: 50%;" src="..." />

对我来说工作得很好......还是我错过了什么？

编辑：但请参阅 Shawn 关于意外升迁的警告。

【讨论】：

抱歉，我喜欢将网站的内容和设计分开。我完全知道添加宽度规则可以正常工作，这是我最初拥有的。谢谢:)
出于某种原因，这是对我有用的唯一选择..谢谢:)

【解决方案2】：

css 属性 max-width 和 max-height 工作很棒，但 IE6 不支持，我相信 IE7。您可能希望在高度/宽度上使用它，以免意外放大图像。您只想按比例限制最大高度/宽度。

【讨论】：

这似乎是针对支持 HTML5 的浏览器的最佳方式。
它适用于 MSIE >= 7: cssportal.com/css-properties/max-width.php
我很高兴旧的 IE 浏览器的东西变得无关紧要。

【解决方案3】：

使用 CSS 按比例调整图像大小：

img.resize {
    width:540px; /* you can use % */
    height: auto;
}

【讨论】：

即使 img 标签有一个 height 和 width 属性，这仍然有效。 +1
+1 如果需要，您也可以使用 max-width 代替 width。关键是使用height:auto 覆盖图像上已经存在的任何height="..." 属性。
在我使用的情况下，高度是固定的，我将宽度设置为自动 :) 谢谢！
一个常见的用法是设置max-width: 100%; height: auto;，这样大的图片就不会超过它们的容器宽度。
如果你想让图像更大，这不起作用。图像失去其纵横比。当然，除非容器与图像具有相同的纵横比。

【解决方案4】：

2015 年重访：

<img src="http://imageurl" style="width: auto; height: auto;max-width: 120px;max-height: 100px">

我重新审视了它，因为所有常见的浏览器现在都具有上面 Cherif 建议的工作自动功能，因此效果更好，因为您不需要知道图像是宽还是高。

旧版本：例如，如果您受限于 120x100 的盒子，您可以这样做

<img src="http://image.url" height="100" style="max-width: 120px">

【讨论】：

【解决方案5】：

控制大小，保持比例：

#your-img {
    height: auto; 
    width: auto; 
    max-width: 300px; 
    max-height: 300px;
}

【讨论】：

问题是不是所有浏览器都会解释 max-width 和 max-height，比如 IE，对吧？
@alexserver 它适用于 MSIE >= 7：cssportal.com/css-properties/max-width.php
这个答案更好......您可以在保持比率的同时设置宽度和高度的最大界限。
是的，这是问题的正确答案，因为它考虑了图像方向（即横向与纵向）。谢谢！

【解决方案6】：

img {
    max-width:100%;
}

div {
    width:100px;
}

有了这个 sn-p，你可以更有效地做到这一点

【讨论】：

【解决方案7】：

请注意，width:50% 会将其大小调整为图像的 50% 可用空间，而 max-width:50% 会将图像调整为 其自然大小的 50% >。在使用此规则进行移动网页设计时要考虑这一点非常重要，因此对于移动网页设计，应始终使用max-width。

更新：这可能是一个旧的 Firefox 错误，现在似乎已经修复了。

【讨论】：

嗯...至少在桌面上似乎不是这样：jsfiddle.net/nLh1oh5e
这对我来说似乎也不是这样。
感谢您提出这个问题。它有很大的不同。（至少，我注意到了）
真的，谢谢。但是你如何处理图像的大小包装？它仍然表现得像图像是 100% 宽而不是 50%，从而导致不需要的边框。我希望它紧紧地贴合缩小后的图像。
这种方式的问题在于max-width与图片的原始尺寸无关。 50% 的 max-width 表示“包含块宽度的 50%”。 (Docs on width)

【解决方案8】：

通过保持图像的纵横比来缩放图像

试试这个，

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

【讨论】：

【解决方案9】：

如果是背景图片，使用 background-size:contain。

示例 css：

#your-div {
  background: url('image.jpg') no-repeat;
  background-size:contain;
}

【讨论】：

或background-size:cover;，将覆盖整个区域。
背景尺寸：包含；为我工作。
还要加上你想要的宽度和高度=100%
@Turion 太棒了，谢谢，完美运行并修复了由 max-width: 300px 引起的缩放问题；

【解决方案10】：

试试

transform: scale(0.5, 0.5);
-ms-transform: scale(0.5, 0.5);
-webkit-transform: scale(0.5, 0.5);

【讨论】：

实际上，如果您必须按比例缩小每个图像的大小，这非常有效。使用此代码，图像会缩小 2 倍。 +1 但是！使用此解决方案，图像仍会占用空间！
@MārtiņšBriedis：这不是重点吗？有没有办法让服务器上的图像“仅使用 CSS”占用更少的空间（参见 OP）？！
不是那种空间。图像在文档中仍然具有相同的边界、宽度、高度，只是它们“看起来”小了 2 倍。想象一下 - 大小为 100x100 的图像。然后你应用 scale(0.5)，它与图像 50x50 相同，但两边都有不可见的 25px 边框。图像仍然会占用 100x100 的空间。 ——
@MārtiņšBriedis：嗯。我得试试看。已经有一段时间了，它似乎做了想要的事情。
这是给你的 jsfiddle：jsfiddle.net/oy6t2xgL

【解决方案11】：

你总是需要这样的东西

html
{
    width: 100%;
    height: 100%;
}

在 css 文件的顶部

【讨论】：

这是一个很好的答案，为什么这被否决了？这是一种不好的做法吗？

【解决方案12】：

使用这种简单的缩放技术

img {
    max-width: 100%;
    height: auto;
}
@media {
  img { 
    width: auto; /* for ie 8 */
  }
}

【讨论】：

【解决方案13】：

试试这个：

div.container {
    max-width: 200px;//real picture size
    max-height: 100px;
}

/* resize images */
div.container img {
    width: 100%;
    height: auto;
}

【讨论】：

【解决方案14】：

您可以使用 object-fit 属性：

.my-image {
    width: 100px;
    height: 100px;
    object-fit: contain;
}

这将适合图像，而不改变比例。

【讨论】：

我使用宽度 100% 和高度 100% 并且对象适合包含。它就像一个魅力:)。并且对象拟合包含解决方案很简单
注意浏览器支持：developer.mozilla.org/en-US/docs/Web/CSS/object-fit 目前，没有 IE 和 android 4.4.4+。
object-fit 效果很好 - 似乎只需要height 和width 或max-height 和max-width 都不会导致图像在任一方向溢出容器。跨度>

【解决方案15】：

img{
    max-width:100%;
    object-fit: scale-down;
}

为我工作。它会缩小较大的图像以适合框，但将较小的图像保留为原始大小。

【讨论】：

有趣的解决方案，尽管重要的是要注意图像的足迹仍然占用height 属性是什么。例如，一张 100x100 的图片可以缩小到 80x80，但随后会在 100x100 占用空间的中间居中。
这个答案是一个更好且可扩展的解决方案。
object-fit: scale-down; 就够了，没有max-width 对我有用

【解决方案16】：

我们可以使用媒体查询和响应式设计原则在浏览器中使用 CSS 调整图像大小。

    @media screen and (orientation: portrait) {
img.ri {
    max-width: 80%;
  }
}

@media screen and (orientation: landscape) {
  img.ri { max-height: 80%; }
}

【讨论】：

【解决方案17】：

image_tag("/icons/icon.gif", height: '32', width: '32') 我需要将 height: '50px', width: '50px' 设置为图像标签，并且此代码从第一次尝试就可以使用注意我尝试了上述所有代码但没有运气，所以这个可以工作，这是我的 _nav.html 中的代码。 erb:
<%= image_tag("#{current_user.image}", height: '50px', width: '50px') %>

【讨论】：

【解决方案18】：

我相信这是最简单的方法，也可以通过 <img> 标签内的内联 style 属性使用。

.scaled
{
  transform: scale(0.7); /* Equal to scaleX(0.7) scaleY(0.7) */
}

<img src="flower.png" class="scaled">

或

<img src="flower.png" style="transform: scale(0.7);">

【讨论】：

我测试了它，但我认为它非常低效，因为这样做，边框模型保持不变。你可能不想要这个，但我知道这可能很有用，也许