140

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

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

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

4

8 回答 8

160

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

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

于 2009-08-28T15:21:37.407 回答
27

CSS就足够了：

img {
    width : desired_width;
    height: auto; /*to preserve the aspect ratio of the image*/
}
于 2016-07-22T12:49:21.780 回答
24

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

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

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

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

检查此链接。

于 2019-12-09T17:13:21.743 回答
8

不需要Javascript。

IE6 浏览器 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

于 2013-03-07T18:25:02.467 回答
7

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

于 2015-07-17T15:37:50.817 回答
3

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

于 2009-08-28T15:23:55.387 回答
3

对于固定大小矩形中的自动信箱/邮筒，请使用object-fitCSS 属性。这通常是我想要的，它避免使用代码来确定哪个是主要维度，或者——我过去常做的——嵌入一个<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>

于 2020-11-12T21:54:47.180 回答
1

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

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

2）上传较小的图像。现在上传时有很多程序（您需要 PHP 或 .net 之类的东西来执行此操作），您可以让它自动缩放。

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

祝你好运！

于 2009-08-28T15:24:20.800 回答