HTML img 缩放答案

【问题标题】：HTML img scalingHTML img 缩放
【发布时间】：2010-11-23 18:39:10
【问题描述】：

我正在尝试使用 HTML img 标签显示一些大图像。此刻他们离开了屏幕的边缘；如何缩放它们以保持在浏览器窗口内？

或者，如果这是不可能的，是否可以至少说“以正常宽度和高度的 50% 显示此图像”？

width 和 height 属性扭曲了图像——据我所知，这是因为它们引用了容器最终可能具有的任何属性，这些属性与图像无关。我无法指定像素，因为我必须处理大量图像，每个图像都具有不同的像素大小。最大宽度不起作用。

【问题讨论】：

请记住，它不建议发送大图像并使用 css 将它们缩小。最好有同一张图片的不同版本，以节省带宽并使页面更具响应性（即使图片看起来很小，也会发送完整的图片）。
rwallace，您使用的是 .net 或 PHP 还是纯 HTML 以外的其他东西？
图像文件大小无关紧要，在我正在寻找节俭带宽的情况下没有要求。我正在使用 PHP，但 HTML 解决方案有效。

标签： html image-scaling

【解决方案1】：

只设置width或height，它会自动缩放另一个。是的，您可以使用百分比。

第一部分可以完成，但需要 JavaScript，因此可能不适用于所有用户。

【讨论】：

拜托，拜托，请注意，在大量图像上执行此操作会导致下载时间过长，因为页面不应该有很长的下载时间。如果可能，最好实际调整图像大小。
谢谢！事实证明，您仅设置宽度的解决方案不仅适用于正确缩放，而且实际上只需将宽度设置为 100% 即可完成第一部分。
@ceejayoz 我同意，但这不是他要问的。
@ceejayoz 我想知道，为什么需要更长的时间？在两种情况下都显示它时不需要调整大小吗？或者您是说手动调整实际图像的大小并更改文件？
@Abdul 我是说 3,000x3,000 像素的 5MB 图像不应该用于您网站的 100x100 像素插槽中。

【解决方案2】：

我认为最好的解决方案是通过脚本或本地调整图像大小并再次上传。请记住，您是在强迫观众下载比他们需要的更大的文件

【讨论】：

【解决方案3】：

我知道如何做到这一点的最佳方法是：

1) 将溢出设置为滚动，这样图像会保留在其中，但您可以滚动查看它

2) 上传较小的图片。现在上传时有很多程序（你需要 PHP 或 .net 之类的东西来做这个顺便说一句）你可以让它自动缩放。

3) 使用它并设置宽度和高度，虽然这会使它看起来失真，但正确的尺寸仍然会导致用户不得不下载完整尺寸的图像。

祝你好运！

【讨论】：

【解决方案4】：

无需 Javascript。

IE6 Internet Explorer 6

百分比仅适用于元素的宽度，但如果没有正确的代码，height:100%; 将不起作用。

CSS

html, body { height:100%; }

然后使用百分比可以正常工作，并在窗口调整大小时动态更新。

<img src="image.jpg" style="height:80%;">

您不需要宽度属性，宽度会随着浏览器窗口大小的变化而按比例缩放。

这个小宝石，如果图像被放大，它不会看起来（过度）块状（它插入）。

img { -ms-interpolation-mode: bicubic; }

道具转到此来源： Ultimate IE6 Cheatsheet: How To Fix 25+ Internet Explorer 6 Bugs

【讨论】：

或 style="height: 80%; image-rendering: pixelated;" 用于 chrome （或其他插值方法，如果需要，请参见此处：developer.mozilla.org/en-US/docs/Web/CSS/image-rendering）

【解决方案5】：

将max-width: 100%; 添加到img 标记对我有用。

【讨论】：

【解决方案6】：

CSS 就够了：

img {
    width : desired_width;
    height: auto; /*to preserve the aspect ratio of the image*/
}

【讨论】：

【解决方案7】：

我知道这个问题已经被问了很长时间，但截至今天，一个简单的答案是：

<img src="image.png" style="width: 55vw; min-width: 330px;" />

这里使用vw表示宽度是相对于视口宽度的55%。

现在所有主流浏览器都支持这个。

检查这个link。

【讨论】：

vw 是我的救星，其他方法对手头的图像不起作用。

【解决方案8】：

对于固定大小矩形中的自动信箱/邮筒，请使用object-fit CSS 属性。这通常是我想要的，它避免使用代码来确定哪个是主要维度，或者——我以前做的——嵌入一个带有 <image> 子元素的 <SVG> 元素，以用其漂亮的 preserveAspectRatio 包装内容选项。

<!DOCTYPE html>
<html>
  <head>
    <style>
      :root
      {
        --box-side : min( 42vmin, 480px ) ;
      }
      body
      {
        align-items : center ;
        display : flex ; 
        flex-wrap : wrap ;
        justify-content : center ;
      }
      body,html
      {
        height : 100% ;
        width : 100% ;
      }
      img
      {
        background : grey ;
        border : 1px solid black ;
        height : var( --box-side ) ;
        object-fit : contain ;
        width : var( --box-side ) ;
      }
    </style>
    <title>object-fit</title>
  </head>
  <body>
    <img src="https://alesmith.com/wp-content/uploads/logos/ALESMITH-MasterLogoShadow01-MULTI-A.png" />
    <img src="https://ballastpoint.com/wp-content/themes/ballastpoint/assets/img/bp-logo-color.svg" />
    <img src="https://d2lchr2s24ssh5.cloudfront.net/wp-content/uploads/2014/01/GF19_PrimaryLogo_RGB.png" />
    <img src="https://s3-us-west-1.amazonaws.com/paradeigm-social/NeFAAJ7RlCreLCi9Uk9u_pizza-port-logo.svg">
    <img src="https://s3-us-west-2.amazonaws.com/lostabbey-prod/Logos/Logo_Port_SM_Circle_White.png" />
  </body>
</html>

【讨论】：