Question

我有一个图像，比如尺寸为320 x 240像素，我希望在网页上显示两倍大小（即640 x 480像素）。过去，我通过在PHP代码上设置width=640来完成此操作。

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

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

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

Answer 1

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

E.g。 img { width: 640px; }。这将保持适当的宽高比而不指定高度。

＆＃13;

img {
  width: 640px;
}

＆＃13;

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

＆＃13;

E.g。 img { transform: scale(2) }

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

＆＃13;

.imageContainer {
  width: 640px;
  height: 480px;
}

img {
  width: 100%;
  height: 100%
}

＆＃13;

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

＆＃13;

Answer 3

通过CSS，理想情况下在样式表中，但必要时在style属性中。

例如，这里你的32x32 gravatar拉伸到128x128：

＆＃13;

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

＆＃13;

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

＆＃13;

当然，无论何时拉伸这样的图像，质量都可能受到影响。

Answer 4

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

有用的注意事项：

从一开始我就必须拥有高质量的图像我建议使用矢量图像。我更喜欢使用PNG或SVG。它比jpeg和其他人有更好的质量。以下是一些描述图像扩展的链接。

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

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

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

Answer 6

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

1。直接设置`width`

的img属性

原则：修改图像的宽度。

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

2。用`img`

包裹div

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

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倍

提示：另外，我们需要将属性transform-origin设置为top left，以便它可以从位置开始（相对）top: 0; left: 0;

运行代码段并查看：）

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

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

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

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

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

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

关于失真，没有太多可说的，除非不要这样做。任何其他选择都比失真更好：裁剪，像素化，甚至是FOUC。失真基本上说：“不要相信我的设计任务 - 我无法告诉他们来自donts” - 这对许多人来说，转化为：“我没有资格专业前端开发。我会搞砸任何网站，很可能不知道“。

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

另一个获得两全其美（速度和图像质量）的优秀技术是：

为折叠下方的每个图片加载比例缩略图版本（是的，它们看起来像素化）并以.65不透明度显示它们。延迟加载全尺寸图像，然后滚动到视图中。即使像素化版本在短时间内可见，它也会被全尺寸版本所取代，从而产生焦点效果，同时将不透明度更改为1。如果你有高质量，出色的图像，你真的想要这种效果（a），因为它使它们脱颖而出b）因为你想要以适当，清晰的尺寸加载图像。这些图像看起来很“活跃”，并且得到了微妙的关注，让参观者看到了一个高度复杂的网站。

避免超大。这里src-set开始发挥作用，并与上述缩略图加载器结合使用。而且，当然：懒惰加载。懒得加载任何东西。它有很大的不同。

简而言之，就是如何正确加载图像。实际上，它是一个巨大的主题，我甚至没有触及优化，光栅与矢量，svg或webp格式。

Answer 8

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

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

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

Answer 9

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

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 };

}

Answer 10

您可以使用转换 - ＆gt;规模

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

Answer 11

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

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

因此：使用以下风格应该是一个好主意。

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

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

此用例仅在我们知道图像高度和宽度时才有用。

Answer 12

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

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

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

Answer 13

CSS技巧，只设置一个属性

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

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

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

在某种程度上对响应式设计很有用，我觉得这很棘手！

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

Answer 14

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

1）由于升级会使图像失真，因此图像质量最佳。

2）无需加载更多不同尺寸的图像

3）降尺度不会破坏图像，只是 CSS

的一些行

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

Answer 15

我喜欢以前的大多数解决方案，但问题是我们实际上并不知道当前的图像尺寸要加倍!!

所以，我的解决方案有点动态，它也不会影响您网站上的其他图像。此外，它可以增强到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！

Answer 16

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

  image{ transform: scale(2); }

尝试使用缩放比例将图像加倍大小
尝试使用CSS设置图片中的宽度
尝试使用带有setAttribute的JavaScript（“width”，“size”）

Answer 17

您可以像这样使用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>

Answer 18

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

检查以下示例：

＆＃13;

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

＆＃13;

您上传了一张相对较大的图片，至少是FHD或更大的图片，然后使用＆＃39;尺寸＆＃39;和＆＃39; srcset＆＃39;您配置它，根据屏幕大小/类型加载哪一个。这样，您可以覆盖任何可能的分辨率，无论大小，您始终可以显示最佳版本的图像。好吧，我承认，在上传之前，每张图片都会进行一些手工劳动，但最终的结果是值得的！

现在，如果您坚持保留相同的小图像文件并通过编码将其加倍，那么最好的方法是在图像中添加CSS类，并在该类上指定您的加倍尺寸，以及它

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

Answer 19

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

这句话对我来说意味着这句话是为了“照顾可扩展性”。

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

进行缓存

只要做得好，我们就可以在月亮大小上进行缩放，保持平稳......

Svg 可以在服务器端生成，但使用（gimp）小心创建它们总是更好。然后用文本编辑器打开svg。

如果使用图像，目前，对于不同屏幕分辨率的精美渲染，最好使用srcset以不同分辨率使用它们的一组。最后，就像其他动态元素一样，让客户端浏览器通过为他提供许多选项来做出选择。再次，考虑到缓存。它将下载并保留所需的一个。

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

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

新的 css属性在城里：图片呈现。

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

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

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

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

19 个答案:

有用的注意事项：

1。直接设置`width`

2。用`img`

3。将图像设置为`div`

4。将图像缩放为2x

CSS技巧，只设置一个属性

HTML

的JavaScript

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

19 个答案:

有用的注意事项：

1。直接设置width

2。用img

3。将图像设置为div

4。将图像缩放为2x

CSS技巧，只设置一个属性

HTML

的JavaScript

1。直接设置`width`

2。用`img`

3。将图像设置为`div`