如何将网页上的图像大小加倍？答案

【问题标题】：How do I double the size of an image on a web page?如何将网页上的图像大小加倍？
【发布时间】：2018-09-11 21:15:10
【问题描述】：

我有一个图像，例如 320 x 240 像素，我想在网页上显示两倍大小（即 640 x 480 像素）。过去，我通过在img 标签上设置width=640 来做到这一点。

但是，我刚刚发现了以下in the HTML specification：

尺寸属性不用于拉伸图像。

在这种情况下，我如何在不违背规范的情况下将网页上的图像大小加倍？

【问题讨论】：

他们说如果你有一个 320 像素的图像，你不应该把它炸两次。
@JoeWarner：不，属性是用来告诉布局引擎在下载之前图像有多大，因此页面不会在图像出现时移动。拉伸是撒谎/弄错的副产品。 :-)
服务器端加倍。并询问我的服务器/资源/我的资源？w=x&h=y。以某种方式缓存它或将其隐藏在 CDN 后面。否则您将遇到渲染问题、拉伸/调整大小问题等
查看以下内容可能会有所帮助。 W3 建议使用 flex、flexbox..lists.w3.org/Archives/Public/www-style/2012Apr/0719.html 和 codepen.io/dudleystorey/pen/Kgofa

标签： javascript html css image scaling

【解决方案1】：

最复杂的东西都藏在最简单的东西里！

这句话对我的意义是“照顾可扩展性”。

为此，没有什么比 svg 更好的了。我们需要考虑缓存。只是避免直接嵌入它们。让客户端浏览器使用外部 src 进行缓存。

一旦完成，我们可以将其缩放为 月亮大小，保持平滑...

Svg 可以在服务器端生成，但最好使用 (gimp) 仔细创建它们。然后用文本编辑器打开 svg。

如果使用图像，目前，为了在不同的屏幕分辨率下进行漂亮的渲染，最好使用一组不同分辨率的图像，srcset。最后就像其他动态元素一样，让客户端浏览器通过为他提供许多选项来进行选择。同样，考虑到缓存。它会下载并只保留它需要的那个。

如果存在 html 解决方案，我们应该在尝试更改它之前使用它（通过 js 或 css）。

https://css-tricks.com/responsive-images-css/

一个新的 css 属性在城里：image-rendering。

https://drafts.csswg.org/css-images-3/#the-image-rendering

像往常一样，最完整的答案是规格！

https://drafts.csswg.org/css-images-3

【讨论】：

【解决方案2】：

CSS 技巧，只设置一个属性

如果你想使用 CSS，有一个非常好的方法：

img#image_id {
    width: calc(2 * 320px);
    height: auto; /* This can be omitted */
}

这非常有用，您可以通过仅更改一个数字（即因子）来更改图像的比例。不用担心图像高度，它会由浏览器自动设置，即使您省略将图像高度设置为自动（因为自动是宽度和高度的默认值；参见this 和this）。此外，您可以设置高度而不是设置宽度。

它在某种程度上对响应式设计很有用，我认为这真的很棘手！

注意：如果您设置了父级的宽度或高度，它不适用于弹性盒。在这种情况下，您必须明确设置宽度和高度，否则会有其他技巧； flex-boxes 的工作方式完全不同。

【讨论】：

【解决方案3】：

我使用以下 Java 脚本代码来缩放最适合容器的图像。您可以根据需要进行一些更改。

function scaleImage(container, image) {
var c = document.getElementById(container);
var i = document.getElementById(image);
var newSize = scaleSize(c.clientWidth, c.clientHeight, i.width, i.height);
i.style.width = newSize.width;
i.style.height = newSize.height;
c.style.backgroundColor = "transparent";
c.style.border = "none";
var intHeight = ((100-((parseFloat(i.style.height)/87)*100))/2);
var strHeightPercentage = intHeight.toString().concat("%");
c.style.top = strHeightPercentage;}

函数 scaleSize(maxW, maxH, currW, currH) { var 比率 = currH / currW;

if (currW >= maxW && ratio <= 1) {
    currW = maxW;
    currH = currW * ratio;
}
else if (currH >= maxH) {
    currH = maxH;
    currW = currH / ratio;
}
return { width: currW, height: currH };

}

【讨论】：

【解决方案4】：

首先，我创建了一个具有特定大小的名为 divWrapper 的类的 div。然后，我们为我们的图像创建一个宽度为 100% 的类（跨越 divWapper），并添加一个 auto 高度（自动保持高度适当的比例）。您可以根据 divWapper 类调整图像的大小。

.divWrapper{
width:640px;
height:480px;
float:left;
}
//Now set you image class to 
.imageclass{  
width:100%
height:auto;
float:left;
}

<div class="divWrapper">
<image class="imageclass" src="https://upload.wikimedia.org/wikipedia/commons/2/2d/Picea_glauca_taiga.jpg">
<div>

无论包装容器的大小如何，这都会使图像保持成比例。

一个有用的提示：

您必须从一开始就拥有高质量的图像，我建议使用矢量图像。我更喜欢使用 PNG 或 SVG。它具有比 jpeg 和其他更好的质量。这里有几个链接描述了一些关于图像扩展的信息。

https://blog.online-convert.com/best-image-file-extensions/

https://www.sitepoint.com/gif-png-jpg-which-one-to-use/

【讨论】：

实际上将其设置为 100% 高度会拉伸以适应和降低图像质量。如果您必须使用高度，请将高度设置为大小，将宽度设置为自动。并且 OP 没有对浮动发表评论。
当然，你是对的。虽然，问题是关于double the size of an image。为了实现这一点，这将花费一些延伸问题，但我们不知道他需要做什么。不知道中间有没有什么。如果您知道解决方案；请与我们分享！
@Elharony 此解决方案可缩放到适当的尺寸并保持与原始解决方案相同的比例。如果将图像容器的宽度加倍，图像就会加倍......为什么我们仍然有这个对话框是我的解决方案的问题？
哦，不，这里没有问题。我关心的是父级的固定值：width:640px; height:480px;。我的意思是，我们不知道传入图像的大小。前任;如果原始图像是 400x200。为了加倍，我们想将父 div 设置为 800x400。不是 640x480。这就是我在尝试提供 javascript - 动态 - 解决方案时的想法。但我想这完全取决于提出这个问题的人的需要。无论如何，我喜欢你的解决方案，它没有任何问题，我只是和你大声分享我的想法！
这是一个示例 OP 在构建页面时会知道大小。图像的大小并不重要，只是你用它做什么。他必须将图像放在某个地方，某个容器中。我喜欢你的 js 解决方案，但即使这样也必须放在某个容器或标签内。

【解决方案5】：

一般来说，我还没有找到一篇文章提供了一种使用客户端技术（留下 browser's mechanism）缩放图像而又不损失一些质量的方法。

话虽如此，我担心如果您想要根据HTML Standard specifications 将图像翻倍的最佳方式，最好的答案是使用不同的图像。通过后端处理或通过 Photoshop 放大的图像。现在，如果您想根据用户的屏幕自适应图像，因为这很可能是 HTML 标准通过以下方式实现的实际情况：

<picture>
 <source srcset="http://www.placehold.it/320x240" media="(min-width: 600px)">
 <source srcset="http://www.placehold.it/640x480" media="(min-width: 900px)">
 <img src="http://www.placehold.it/160x120">
</picture>

【讨论】：

您介意在您的答案中添加<img srcset=""> 吗？ <picture> 并不总是最好的方法。 [不要使用（大部分时间）](cloudfour.com/thinks/dont-use-picture-most-of-the-time/…)

【解决方案6】：

你可以使用变换 -> 缩放

img#imagId {
    -ms-transform: scale(2); /* IE 9 */
    -webkit-transform: scale(2); /* Safari 3-8 */
    transform: scale(2);
}

【讨论】：

【解决方案7】：

尺寸属性不用于拉伸图像。

正如您已经提到的，使用宽度属性并不打算拉伸图像。所以在这种情况下，我们应该使用transform: scale(2);，这是一个好主意，但这也可能会在图像与其他内容重叠时产生冲突，所以最好的办法是使用 div 的 2x 宽度，图像缩放 2x，css 属性为 'transform: scale(2);'

因此：使用以下样式应该是个好主意。

.img2x_container {
    width: 640px;
    height: 480px;
}

.img2x_container img {
    transform: scale(2);
}

这个用例只有在我们知道图像高度和宽度时才有用。

【讨论】：

【解决方案8】：

您可以通过以下两种方式实现此目的。

<img class="xx" src="http://placehold.jp/150x150.png">

.xx {
zoom: 200%;
}
.xx {
 transform: scale(2);
}

【讨论】：

【解决方案9】：

您可以使用 css 并避免拉伸。

img{ width:640px; background-size: cover; height:auto;}

这会以合适的高度均匀地拉伸您的图像。您也可以尝试将高度设置为特定数字。

【讨论】：

【解决方案10】：

您可以通过多种方式做到这一点。但无论你做什么，首先下载你想要的尺寸的图像意味着双倍尺寸，否则如果你加倍尺寸，那么它会像素化或看起来褪色。

  image{ transform: scale(2); }

尝试变换比例以将图像放大一倍
尝试用 CSS 设置图片的宽度
用 JavaScript 试试 setAttribute("width", "size")

【讨论】：

【解决方案11】：

最佳方式是将最大的图片加载到您的网站，并通过CSS将其缩小到您需要的位置。

1) 图像质量最佳，因为放大会扭曲图像。

2) 无需加载更多不同尺寸的图片

3) 缩小并不会破坏图像，它只是几行 CSS

如果您不想加载更大的图像，第二个最佳和最快的解决方案是通过 CSS 将其放大。宽度属性在<img> 中不再有效

【讨论】：

【解决方案12】：

我喜欢以前的大多数解决方案，但这里的问题是我们实际上并不知道当前的图像大小将其翻倍！！

所以，我的解决方案有点动态，它也不会影响您网站上的其他图片。此外，还可以将其增强为triple 的大小，如果您愿意，还可以增加更多！

检查Live Preview here。

或在下面阅读：

HTML

<img class="resize-double" src="https://placeimg.com/100/50/nature">
<img src="https://placeimg.com/200/100/nature">

JavaScript

// Select all images to be resized
const toResizeImgs = document.querySelectorAll(".resize-double");

// Loop over those images and double their size
for(let i=0; i < toResizeImgs.length; i++) {
  toResizeImgs[i].style.width = toResizeImgs[i].offsetWidth * 2 + "px";
  toResizeImgs[i].style.height = toResizeImgs[i].offsetHeight + "px";
}

它将选择具有resize-double 类的图像，循环它们并将它们的宽度/高度更改为当前图像的 2 倍！

注意：offsetWidth 和 offsetHeight 都返回当前的宽度/高度，包括边距、填充和边框。如果不适合您，您可以根据需要使用clientWidth 和clientHeight，甚至scrollWidth 和scrollHeight！

【讨论】：

嗯，我注意到有人投反对票。否决我的人可以通过解释原因来帮助我。这将有助于我下次改进我的答案！谢谢:)
不是我，但可能是因为您使用的 JS 仅使用 CSS 解决方案就足够了。
感谢您的评论@mrcharlie！但是 CSS 解决方案的问题是我们实际上并不知道原始图像的大小。这就是为什么我认为 JS 解决方案会更好，因为无论它是原来的大小，它都会增加一倍。
您不需要知道原始图像大小，您只需要按比例放大图像大小。使用类似transform: scale(2) 的东西会起作用。
@mrcharlie 不，我没有说我只是在阅读 cmets'

【解决方案13】：

以下是加载图片时要避免的事项列表：

FOUC - 当浏览器在加载之前没有图像大小时会发生这种情况（在这种情况下，在完全加载之前它不会为它分配任何空间）或告诉浏览器错误的大小
失真（以不同于 1:1 的纵横比显示图像）
像素化（以比原始尺寸大得多的尺寸显示图像）
加载原生尺寸明显大于页面尺寸的图片 - 它们会减慢页面速度并消耗不必要的带宽

有办法处理上述每一个。

为了避免FOUC，有几种方法：

除了文件本身之外，还保存了图像大小（或比例），因此您可以在加载图像之前在页面流中分配正确的空间（例如，WP 开箱即用，大多数主题都使用它来避免 FOUC）
将图像加载到容器中，作为带有background-size: cover 的背景图像，因此FOUC 是不可能的，因为在加载图像之前文档已经知道元素的大小。这种技术还具有在图像加载失败时不显示损坏的图像锚点的优点。此外，这种技术今天广泛用于全屏图像布局，其中一些使用视差效果。具有裁剪顶部/底部或左侧/右侧的缺点，具体取决于容器和图像之间的纵横比差异。
将图像加载到position:absolute 居中的容器中，当您拥有它的大小（并且能够计算文档流中的确切位置）时，将其比例从 0 设置为 1，同时将其容器大小从“默认”设置为正确大小。

关于失真，没什么好说的，除了不做。任何其他选项都比失真更好：裁剪、像素化，甚至 FOUC。 Distortion 基本上是在说：“不要相信我的设计任务——我无法区分不做与不做” - 对许多人来说，这意味着：“我不具备专业资格前端开发。我会在不知情的情况下搞砸任何网站。

开启像素化。这是一个棘手的问题：您希望页面尽可能快地加载，但也需要清晰的图像。在处理非常大的背景图像时，一个巧妙的技巧是在图像上添加图案（条纹、圆点或任何其他此类半透明图案 - 一种使像素化不那么明显的艺术感）。

另一个获得两全其美（速度和图像质量）的好而聪明的技术是：

为首屏下方的每个图像加载一个比例缩略图版本（是的，它们看起来会像素化）并以.65 不透明度显示它们。在滚动到视图之前延迟加载全尺寸图像。即使像素化版本在短时间内可见，它也会被全尺寸版本替换，从而产生聚焦效果，同时将不透明度更改为1。如果你有高质量、出色的图像，你真的想要这种效果（a）因为它让它们脱颖而出，b）因为你想以适当的、清晰的尺寸加载图像）。这些图像看起来“鲜活”并获得微妙的焦点，给访问者留下的印象是在看一个高度复杂的网站。

避免尺寸过大。这里src-set 发挥作用，结合上述缩略图加载器。而且，当然：延迟加载。总是延迟加载首屏以下的任何内容。这有很大的不同。

简而言之，这就是您正确加载图像的方式。实际上，这是一个巨大的主题，我什至没有接触过优化、光栅与矢量、svg 或 webp 格式。

【讨论】：

【解决方案14】：

至少有 4 种方法可以做到这一点。

1。直接设置`img`的`width`属性

原理：修改图片的宽度。

为img 标签设置width: 640px; display: block。

2。用`div` 包裹`img`

原理：从父节点继承宽度。

div width: 640px
img display: block; width: 100%

3。将图像设置为`div` 的背景

原理：图片不再是img标签，而是节点的背景。

div background-image: url()，使用图片作为背景图片。
div background-size: {2x width} {2x height}，调整图片大小

4。将图像缩放为 2x

将transform 属性设置为scale(2)，这意味着我希望它的大小是原始大小的2 倍

tips：另外，我们需要将属性transform-origin设置成top left，这样才能从top: 0; left: 0;的位置（相对）开始

运行 sn-p 看看 :)

.method-1 {
  display: block;
  width: 640px;
}

.method-2 {
  width: 640px;
}
.method-2 img {
  display: block;
  width: 100%;
}

.method-3 {
  width: 640px;
  height: 480px;
  background-image: url(http://www.placehold.it/320x240);
  background-size: 640px 480px;
}

.method-4 {
  transform-origin: top left;
  transform: scale(2);
}

<h1>method 1: img displays as block, width 640px</h1>
<img src="http://www.placehold.it/320x240" class="method-1" />

<br/>

<h1>method 2: parent dom width 640px, img width 100%.</h1>
<div class="method-2">
  <img src="http://www.placehold.it/320x240" />
</div>

<br/>

<h1>method 3: the img as div's background, use the background-size attribute to set 2x size.</h1>
<div class="method-3"></div>

<br/>

<h1>method 4: use CSS3 transform property to scale the image into 2x.</h1>
<p>tips: when we set `transform: scale(2);`, we also need to define the `transform-origin` property to `top left`, in order that the image will align from top to bottom as well as from left to right, or it will lost itself. LOL.</p>
<img src="http://www.placehold.it/320x240" class="method-4" />

【讨论】：

【解决方案15】：

你可以像这样使用 javascript 来改变图像大小的两倍

Check this JsFiddle Demo

<html lang="en">
<head>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $("button").click(function(){
    var img = $("#sky");
    // Create dummy image to get real size
    $("<img>").attr("src", $(img).attr("src")).load(function(){
        var realWidth = this.width;
        var realHeight = this.height;
        alert("Original width=" + realWidth + ", " + "Original height=" +     realHeight);
        var newWidth = realWidth * 2;
        var newHeight = realHeight * 2;
        $("#sky").width(newWidth);
        $("#sky").width(newHeight);
         alert("new Image Size" + newWidth+"x"+newHeight);
    });
});   
});
</script>
</head>
<body>
<img src="https://www.cluedin.net/images/providers/stackoverflow.png" id="sky" width="250" alt="Cloudy Sky" contextmenu="skymenu">
    <p><button type="button">Get Original Image Size And Double it</button></p>
</body>
</html>

【讨论】：

【解决方案16】：

根据我的经验，将任何图像大小加倍以供网站使用的最佳方法是在 Photoshop 等程序中将图像实际加倍，然后上传。图像尺寸、视网膜屏幕的像素密度以及大量不同的屏幕尺寸使得处理图像比以前更先进，但也没有太难。

检查以下示例：

<picture>
  <source
    sizes="(width < 32em) contain, (width >=32em) contain 80vw calc(100vh - 10em)"
    srcset="full.jpg 2048h 1024w, half.jpg 1024h, quarter.jpg 512h, eighth.jpg 256h" />
  <img src="eighth.jpg" alt="rose flower!" />
</picture>

您上传一张相对较大的图片，至少 FHD 或更大，然后使用“尺寸”和“srcset”进行配置，根据屏幕尺寸/类型加载哪个。通过这种方式，您可以覆盖任何可能的分辨率，无论大小，并且始终显示图像的最佳版本。好吧，我承认，在上传之前，每张图片都会发生一些体力劳动，但最终的结果是值得的！

现在，如果您坚持保留相同的小图像文件并通过编码将其加倍，那么最好的方法是为您的图像添加一个 CSS 类，并在该类上指定您的加倍尺寸，就是这样。

这里有一个关于图像 srcset、大小以及为什么我们需要这样做的重要性的有趣且很好的解释。 A fun article on srcset

【讨论】：

【解决方案17】：

您可以改用 CSS。想到的两种方法是使用宽度或scale 转换。

例如img { width: 640px; }。这将在不指定高度的情况下保持适当的纵横比。

img {
  width: 640px;
}

&lt;img src="http://www.placehold.it/320x240"&gt;

例如img { transform: scale(2) }

img {
  transform-origin: top left;
  transform: scale(2);
}

&lt;img src="http://www.placehold.it/320x240"&gt;

【讨论】：

【解决方案18】：

可以设置父图片容器的尺寸

.imageContainer {
  width: 640px;
  height: 480px;
}

img {
  width: 100%;
  height: 100%
}

<div class="imageContainer">

  <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQqdnZQDnZOOyBGXXB23WS87IAxZ85drC-ylgrqWCqYk2aEh3Vo">
</div>

【讨论】：

这种方法（使用容器）是否比直接在img 上设置width: 640px; height: 480px; 更好？
这会导致图像以 100% 的宽度和 100% 的高度拉伸。如果您的图像是 200px X 500px 并且您将其设置为 640px X 480px 容器，则您的图像会被压扁，如果您将其设置为高度为 1000px 的较大容器，则图像会拉伸。

【解决方案19】：

通过 CSS，最好是在样式表中，但在必要时在 style 属性中。

例如，这是您的 32x32 头像拉伸到 128x128：

.stretch-128 {
  width: 128px;
  height: 128px;
}

&lt;img src="https://www.gravatar.com/avatar/6b938dc4205cd0cea4e4e68451c42a21?s=32&amp;d=identicon&amp;r=PG" class="stretch-128"&gt;

自然，任何时候你像这样拉伸图像，质量都可能会受到影响。

【讨论】：

CSS 技巧，只设置一个属性

一个有用的提示：

HTML

JavaScript

1。直接设置img的width属性

2。用div 包裹img

3。将图像设置为div 的背景

4。将图像缩放为 2x

1。直接设置`img`的`width`属性

2。用`div` 包裹`img`

3。将图像设置为`div` 的背景