如何将网页上的图像尺寸加倍？

Question

我有一张图片，尺寸为 320 x 240 像素，我想在网页上将其显示为双倍尺寸（即 640 x 480 像素）。过去，我通过在 img 标签上设置 width=640 来完成此操作。

The dimension attributes are not intended to be used to stretch the image.

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

Answer 1

通过 CSS，最好采用样式 sheet，但如果需要，在 style 属性中。

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

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

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

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

Answer 2

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

.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 和其他格式更好的质量。这里有几个 link 描述了一些关于图像扩展的信息。

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

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

Answer 3

您可以设置父图像容器的尺寸

.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>

Answer 4

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

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

img {
  width: 640px;
}

<img src="http://www.placehold.it/320x240">

例如img { transform: scale(2) }

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

<img src="http://www.placehold.it/320x240">

Answer 5

根据我的经验，将网站中使用的任何图像的大小加倍的最佳方法是在 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，或者更大的，然后用'sizes'和'srcset'配置，根据屏幕加载哪个size/type. 通过这种方式，您可以覆盖任何可能的分辨率，无论大小，并且始终显示图像的最佳版本。好吧，我承认，每张图片在上传之前都需要一些人工劳动，但最终的结果是值得的！

现在如果你坚持要保留同一个小图片文件，并通过编码将其翻倍，那么最好的方法是在你的图片上添加一个CSS class，然后在那个class 指定你的两倍尺寸，就是这样。

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

Answer 6

您可以使用 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/Whosebug.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>

Answer 7

最复杂的东西隐藏在最简单的东西中！

他们对我来说这句话的意思是“注意可扩展性”。

为此，没有什么比 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

Answer 8

至少有 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()，使用图片作为背景图片。
divbackground-size: {2x width} {2x height},调整图片大小

4。将图像缩放为 2x

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

提示：另外，我们需要将属性transform-origin设置为top left，这样才能从top: 0; left: 0;[=位置（相对）开始29=]

运行片段并查看 :)

.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" />

Answer 9

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

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

有多种方法可以解决上述问题。

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

除了文件本身之外，还保存了图像尺寸（或比率），这样您就可以在加载图像之前在页面流中分配正确的 space（例如，WP 开箱即用）大多数主题使用它来避免 FOUC)
将图像加载到容器中，作为 background-size: cover 的背景图像，因此 FOUC 是不可能的，因为在加载图像之前文档已经知道元素的大小。此技术还具有在图像加载失败时不显示损坏的图像锚点的优点。此外，这种技术如今广泛用于全屏图像布局，其中一些使用视差效果。根据容器和图像之间的纵横比差异，有裁剪 top/bottom 或 left/right 的缺点。
将图像加载到 position:absolute 居中的容器中，当你有它的大小时（并且能够计算文档流中的确切位置）动画它的比例从 0 到 1 同时也动画它的容器大小从 "default"到适当的大小。

关于失真，没什么好说的，就是不要做。任何其他选项都比失真更好：裁剪、像素化，甚至 FOUC。失真基本上说："Don't trust me with design tasks - I'm unable to tell does from donts" - 对许多人来说，翻译为："I'm unqualified for professional frontend development. I'll mess up any website coming my way, most likely without knowing".

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

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

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

避免尺寸过大。这里 src-set 与上述缩略图加载器结合使用。当然还有：延迟加载。始终延迟加载首屏以下的任何内容。这有很大的不同。

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

Answer 10

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

  image{ transform: scale(2); }

尝试变换比例使图像尺寸加倍
尝试使用 CSS
尝试使用 JavaScript 和 setAttribute("width", "size")

Answer 11

我喜欢以前的大部分解决方案，但这里的问题是我们实际上并不知道当前图像大小来加倍！！

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

Check a 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";
}

它会 select 带有 class resize-double 的图像，在它们上循环并将它们的 width/height 更改为当前图像的 2 倍！

注意： offsetWidth 和 offsetHeight return 当前 width/height 包括边距、填充和边框。如果不适合，可以根据需要使用clientWidth和clientHeight，甚至scrollWidth和scrollHeight！

Answer 12

最佳方法是将最大的图像加载到您的站点，然后通过在您需要的地方缩小它CSS.

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

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

3) 缩小比例不会破坏图像，它只是 CSS

的一些行

如果您不想加载更大的图像，第二个最好和最快的解决方案是通过 CSS 对其进行升级。宽度属性不再适用于 <img>

Answer 13

CSS 技巧，只设置一个属性

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

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

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

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

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

Answer 14

好吧，你可以使用 css 并避免拉伸。

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

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

Answer 15

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

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

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

Answer 16

The dimension attributes are not intended to be used to stretch the image.

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

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

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

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

This use case is only beneficial when we know the image height and width.

Answer 17

你可以使用变换 -> 缩放

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

Answer 18

一般来说，我还没有找到一篇文章提供一种在不损失某些质量的情况下使用客户端技术缩放图像的方法（保留 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>

Answer 19

我使用以下 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;}

function scaleSize(maxW, maxH, currW, currH) { var ratio = 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 };

}

如何将网页上的图像尺寸加倍？

How do I double the size of an image on a web page?

html

javascript

css

scaling

image

有用的说明：

1。直接设置`img`

2。用 `div`

3。将图像设置为 `div`

4。将图像缩放为 2x

HTML

JavaScript

CSS 技巧，只设置一个属性

如何将网页上的图像尺寸加倍？

How do I double the size of an image on a web page?

html

javascript

css

scaling

image

有用的说明：

1。直接设置img

2。用 div

3。将图像设置为 div

4。将图像缩放为 2x

HTML

JavaScript

CSS 技巧，只设置一个 属性

1。直接设置`img`

2。用 `div`

3。将图像设置为 `div`

CSS 技巧，只设置一个属性