HTML 图片缩放

Question

HTML 图片缩放

htmlimage-scaling

155

我想用HTML img标签展示一些大图片。目前，它们会超出屏幕边缘；如何将它们缩放以适应浏览器窗口？

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

使用宽度和高度属性会扭曲图片 - 就我所知，这是因为它们引用容器可能具有的任何属性，这与图像无关。我无法指定像素，因为我必须处理具有不同像素大小的大量图像。最大宽度不起作用。

- rwallace

5

请记住，不建议使用 CSS 将大图缩小。最好准备同一张图片的不同版本，以节省带宽并提高页面响应速度（即使图像看起来很小，也会发送完整的图像）。 - Esteban Küber

1

rwallace，您使用的是.NET还是PHP或其他纯HTML之外的东西？ - Dorjan

1

图像文件大小并不重要，在我所关注的情况下，没有对带宽节约的要求。我正在使用PHP，但HTML解决方案也可以。 - rwallace

8个回答

32

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

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

vw这里的使用说明宽度相对于视口宽度的55%。

现今所有主要浏览器都支持此用法。

查看此链接。

- Dimitri Leite

2

"vw" 对我来说是救命稻草，其他方法对于手头的图像都不起作用。 - caram

31

CSS足矣：

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

- Selvadurai Handeeban

8

无需Javascript。

IE6 Internet Explorer 6

百分比仅适用于元素的宽度，但是height:100%;需要正确的代码才能正常工作。

CSS

html, body { height:100%; }

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

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

您不需要width属性，当浏览器窗口大小改变时，宽度会成比例缩放。

如果图像被放大，这个小技巧可以使图像看起来不会过于模糊（它进行插值处理）。

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

感谢以下来源：终极IE6备忘单：如何修复25个以上的Internet Explorer 6错误

- unidentified-1

或者对于Chrome使用style="height: 80%; image-rendering: pixelated;"（或其他插值方法，如有需要请参考此处：https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering）。 - nivniv

7

在 img 标签中添加 max-width: 100%; 对我来说是有效的。

- Ralph David Abernathy

3

我认为最好的解决方案是通过脚本或本地方式调整图片大小，然后重新上传。记住，你强迫你的观众下载比他们需要的更大的文件。

- riotera

3

对于固定大小的矩形自动信箱/柱式信箱，使用CSS属性object-fit。这通常是我想要的，并且它避免使用代码来确定哪个是主导尺寸或者使用嵌入<SVG>元素和<image>子元素来包装内容与其良好的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>

- GiHe

1

我知道的最好的方法是：

1）将溢出设置为滚动，这样图像就会保留，但您可以滚动查看它。

2）上传较小的图像。现在有很多程序可以在上传时自动缩放（顺便说一下，您需要类似于PHP或.net的东西来完成此操作）。

3）接受它并设置宽度和高度，虽然这会使其看起来失真，但正确的大小仍将导致用户必须下载全尺寸的图像。

祝你好运！

- Dorjan

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- RiddlerDev · Accepted Answer

169

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

第一部分可行，但需要JavaScript，因此可能无法适用于所有用户。

- RiddlerDev

14

请注意，对大型图像进行此操作将导致页面下载时间过长，这些页面本来不应该需要很长的下载时间。如果可能的话，实际上重新调整图像大小通常是更好的选择。 - ceejayoz

谢谢！事实证明，您的解决方案仅设置宽度不仅适用于正确缩放，而且通过将宽度设置为100％也可以完成第一部分。 - rwallace

2

@ceejayoz 我同意，但这不是他所问的。 - RiddlerDev

@ceejayoz 我在想，为什么需要更长时间？难道不是在两种情况下显示时都要调整大小吗？还是说你是建议手动调整实际图像并更改文件？ - Honinbo Shusaku

3

@Abdul 我的意思是，一个3,000x3,000像素、5MB大小的图片不应该用在你网站上100x100像素的空间里。 - ceejayoz

我学到的一个技巧是设置最大高度和最大宽度。如果您不希望高度或宽度超过某个特定大小，那么这绝对是一个好主意。图像不会变得比边界约束更大。我曾经遇到过一些情况，其中设置宽度或高度无效。我必须设置最大高度/最大宽度，并根据首先触及的边界让图像显示。 - Grim