HTML 图像缩放

我试图用 HTML img 标记显示一些大图像。现在它们已经离开了屏幕的边缘，我怎样才能缩放它们以保持在浏览器窗口内呢？

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

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

496102 次浏览
小开
最佳答案

只要设置 width或者 height，它就会自动调整另一个的比例。是的，你可以使用一个百分比。

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

小开

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

小开

我知道的最好的方法是:

1)将溢出设置为滚动，这样图像会保持在滚动中，但你可以看到它

2)上传一张较小的图片。现在有大量的程序在那里当上传(您将需要像 PHP 或。顺便说一下，你可以让它自动缩放。

3)与它生活和设置宽度和高度，这虽然会使它看起来扭曲，但合适的大小仍然会导致用户必须下载全尺寸的图像。

祝你好运！

小开

不需要 Javascript。

IE6 Internet Explorer 6

百分比只对元素的宽度起作用，但是如果没有正确的代码，height:100%;就不起作用。

CSS

html, body { height:100%; }

然后使用百分比正常工作，并动态更新窗口大小。

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

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

这个小宝石，是为了防止图像被放大，它不会看起来(过度)块状(它插值)。

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

道具来自这个来源: 最终的 IE6备忘录: 如何修复25 + Internet Explorer 6错误

小开

将 max-width: 100%;添加到 img标记对我来说是可行的。

小开

CSS 就足够了:

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

我知道这个问题已经被问了很长时间，但是到今天为止，一个简单的答案是:

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

在这里使用 大众表明宽度相对于视口宽度的55% 。

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

看看这个 链接。

小开

对于固定大小矩形中的自动信箱/柱形框，请使用 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>


提交答案