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

Posted 2023-03-05

【中文标题】使用 CSS 按比例调整图像大小？ [复制]

【英文标题】：Resize image proportionally with CSS? [duplicate]

【发布时间】：2010-10-21 17:33:07

【问题描述】：

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

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

【问题讨论】：

Ethan Marcotte 最近investigated this issue very thoroughly。简短的回答是肯定的，这是可能的，但不是在所有浏览器中。

如果不想烧带宽，slimmage.js可以帮忙；它读取生成的max-width 值以调整请求的图像尺寸。

图片的宽度可以设置，高度自动调整。

【参考方案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"  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);">

【讨论】：

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