HTML img 缩放
Posted
技术标签:
【中文标题】HTML img 缩放【英文标题】：HTML img scaling 【发布时间】：2010-11-23 18:39:10 【问题描述】：我正在尝试使用 html img 标签显示一些大图像。此刻他们离开了屏幕的边缘；如何缩放它们以保持在浏览器窗口内？
或者，如果这是不可能的，是否可以至少说“以正常宽度和高度的 50% 显示此图像”？
width 和 height 属性扭曲了图像——据我所知，这是因为它们引用了容器最终可能具有的任何属性，这些属性与图像无关。我无法指定像素，因为我必须处理大量图像，每个图像都具有不同的像素大小。最大宽度不起作用。
【问题讨论】：
请记住，它不建议发送大图像并使用 css 将它们缩小。最好有同一张图片的不同版本，以节省带宽并使页面更具响应性（即使图片看起来很小，也会发送完整的图片）。 rwallace，您使用的是 .net 或 php 还是纯 HTML 以外的其他东西？ 图像文件大小无关紧要，在我正在寻找节俭带宽的情况下没有要求。我正在使用 PHP，但 HTML 解决方案有效。 【参考方案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>【讨论】：
以上是关于HTML img 缩放的主要内容，如果未能解决你的问题，请参考以下文章