HTML img缩放

114

我正在尝试显示一些带有HTML img标签的大图像。此刻，它们离开了屏幕的边缘。如何缩放它们以使其停留在浏览器窗口中？

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

width和height属性使图像变形-据我所知，这是因为它们引用了容器最终可能具有的任何属性，而这些属性与图像无关。我无法指定像素，因为我必须处理大量具有不同像素大小的图像集合。最大宽度无效。

html image-scaling

— 华莱士
source

4

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

— 埃斯特万·库伯（EstebanKüber）2009年

1

rwallace，您使用的是.net还是PHP或其他非纯HTML的语言？

— 2009年

1

图像文件的大小无关紧要，在我要节俭带宽的情况下，没有要求。我正在使用PHP，但是HTML解决方案有效。

— rwallace

135

仅设置width或height，它将自动缩放其他。是的，您可以使用一个百分比。

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

— 里德尔·德夫
source

7

拜托，拜托，请注意，对海量图像执行此操作会导致下载时间不长的页面的下载时间较长。如果可能的话，最好调整图像的大小。

— ceejayoz

谢谢！事实证明，仅设置宽度的解决方案不仅适用于正确的缩放比例，而且实际上只需将宽度设置为100％即可完成第一部分。

— rwallace

2

@ceejayoz我同意，但这不是他要的。

— RiddlerDev

@ceejayoz我想知道，为什么要花更长的时间？在两种情况下都显示它时，是否不必调整大小？还是说手动调整实际图像的大小并更改文件？

— 阿卜杜勒

2

@Abdul我是说不应在您网站的100x100像素插槽中使用3,000x3,000像素的5MB图像。

— ceejayoz

18

CSS足够了：

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

— Selvadurai Handeeban
source

9

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

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

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

如今，所有主要的浏览器都支持此功能。

检查此链接。

— 迪米特里·德·耶稣
source

1

vw对我来说是个救命稻草，其他方法对手边的图像不起作用。

— 卡拉姆

6

不需要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; }

道具来源： Ultimate IE6备忘单：如何修复25+ Internet Explorer 6错误

— unidentified-1
source

6

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

— 拉尔夫·大卫·阿伯纳西
source

2

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

— 里奥特拉
source

0

我知道如何执行此操作的最佳方法是：

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

2）上传较小的图片。现在上传时有很多程序（您需要PHP或.net之类的东西才能进行此操作），您可以使其自动缩放。

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

祝好运！

— 多连
source