Question

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

或者在可能发生这种情况的情况下，是否有可能至少说“以正常宽度和高度的50％显示此图像”？

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

Answer 1

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

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

Answer 2

看一眼the W3 Schools reference for the img tag，你应该可以做类似的事情：

<img src="img.jpg" width="50%" height="50%"/>

通过Javascript进行自动缩放，check this tip

Answer 3

css就足够了：

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

Answer 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

Answer 5

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

Answer 6

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

Answer 7

我知道这个问题已经问了很长时间了，但是到目前为止，一个简单的答案是：

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

此处使用 vw 表示宽度是相对于视口宽度的55％。

当今所有主流浏览器都支持此功能。

选中此link。

Answer 8

对于固定大小矩形中的自动信箱/立信箱，请使用object-fit CSS属性。通常这就是我想要的，并且避免使用代码来确定哪个是主要维度，或者（我以前做过的）将<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>

Answer 9

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

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

2）上传较小的图片。现在有很多程序在上传时（你需要像PHP或.net这样的东西才能做到这一点）你可以让它自动缩放。

3）与它一起生活并设置宽度和高度，这虽然会使它看起来扭曲，但正确的尺寸仍然会导致用户必须下载完整尺寸的图像。

祝你好运！

HTML图像缩放

9 个答案:

无需Javascript。