Javascript 如何使网页上的图像大小加倍？_Javascript_Html_Css_Image_Scaling

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

javascript html css image

Javascript 如何使网页上的图像大小加倍？,javascript,html,css,image,scaling,Javascript,Html,Css,Image,Scaling,我有一个图像，比如320 x 240像素，我想在网页上显示两倍大小（即640 x 480像素）。在过去，我通过在img标签上设置width=640来实现这一点然而，我刚刚发现了以下几点：标注属性不用于拉伸图像在这种情况下，如何在不违背规范意图的情况下将网页上的图像大小增加一倍？通过CSS，最好是在样式表中，但在必要时使用style属性例如，这是您的32x32 gravatar拉伸至128x128： .stretch-128{ 宽度：128px；高度：128px； } 首先，我创建了一

我有一个图像，比如320 x 240像素，我想在网页上显示两倍大小（即640 x 480像素）。在过去，我通过在

img

标签上设置

width=640

来实现这一点

然而，我刚刚发现了以下几点：

标注属性不用于拉伸图像

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

通过CSS，最好是在样式表中，但在必要时使用

style

属性

例如，这是您的32x32 gravatar拉伸至128x128：

.stretch-128{
宽度：128px；
高度：128px；
}

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

.divWrapper{
宽度：640px；
高度：480px；
浮动：左；
}
//现在将图像类设置为
.imageclass{
宽度：100%
高度：自动；
浮动：左；
}

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

.imageContainer{
宽度：640px；
高度：480px；
}
img{
宽度：100%；
身高：100%
}

您可以改用CSS。想到这两种方法是使用宽度或变换

例如，

img{宽度：640px；}

。这将在不指定高度的情况下保持适当的纵横比

img{
宽度：640px；
}

根据我的经验，在网站上使用的任何图像的大小翻倍的最佳方法是在Photoshop之类的程序中实际翻倍图像，然后上传。图像大小、视网膜屏幕的像素密度以及过多的不同屏幕大小使得处理图像比以前稍微先进了一点，但并不难

检查以下示例：

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


$（文档）.ready（函数（）{
$（“按钮”）。单击（函数（）{
var img=$（“#天空”）；
//创建虚拟图像以获得真实大小
$("
获取原始图像大小并将其加倍

最复杂的东西隐藏在最简单的东西里

这句话对我来说意味着“注意可伸缩性”

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

一旦这项工作做好，我们就可以将其缩放到月球大小，保持平滑

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

如果使用图像，目前，为了在不同的屏幕分辨率下进行良好的渲染，最好使用一组不同分辨率的图像，使用

srcset

。最后，就像其他动力学元素一样，让客户端浏览器通过提供多个选项来进行选择。同样，考虑到缓存。它将下载并仅保留不需要

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

城里有一个新的css属性：图像渲染

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

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

1.直接设置

img的width属性
原理：修改图像的宽度
设置width:640px；显示img
标签的block

2.用div
原则：从父节点继承宽度
div宽度：640px
img显示：块；宽度：100%
3.将图像设置为div
原理：图像不再是img
标记，而是节点的背景
div背景图像：url（）
，将图像用作背景图像
div背景大小：{2x宽度}{2x高度}
，用于调整图像大小
4.将图像缩放为2x
将transform
属性设置为scale（2）
，这意味着我希望它的大小是其原始大小的2倍
提示：此外，我们需要将属性transform origin
设置为左上
，以便它可以从位置（相对）开始上：0；左：0；

运行代码段并查看：）

。方法1{
显示：块；
宽度：640px；
}
B.方法2{
宽度：640px；
}
.方法2 img{
显示：块；
宽度：100%；
}
B.方法3{
宽度：640px；
高度：480px；
背景图片：url(http://www.placehold.it/320x240);
背景尺寸：640px 480px；
}
B.方法4{
变换原点：左上角；
变换：尺度（2）；
}
方法1:img显示为块，宽度640px


方法2：父dom宽度640px，img宽度100%。


方法3：将img作为div的背景，使用“背景大小”属性设置2x大小。


方法4：使用CSS3变换属性将图像缩放为2x。
提示：当我们设置“transform:scale（2）；”时，我们还需要将“transform origin”属性定义为“top left”，以便图像将从上到下以及从左到右对齐，否则它将丢失自身。LOL
以下是加载图像时要避免的事项列表：

-当浏览器在加载之前没有图像大小时（在这种情况下，浏览器在完全加载之前不会为其分配任何空间），或
<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>                            

  image{ transform: scale(2); }

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

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

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

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

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

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

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

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

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

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

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

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