Javascript 获取<；的最大可能大小；img>；理想作物

我以前也发过一个类似的问题，但我认为我没有很清楚地说明这一点

如果我有一个基本的响应图像，如

假设

nicephoto.jpg

是一个大图像（4000x5000px）。我可以加载整个图像，让浏览器根据自己的css或其容器的css对其进行缩放或裁剪，但理想情况下，我希望服务器向我发送一份完全符合我需要的图像裁剪EDIT：我的问题不是如何进行服务器端裁剪-我已经讨论过了。我的问题如下：

我怎样才能知道图像的最大宽度和高度是多少，直到部分图像被剪掉或图像被缩小？换句话说，这个图像应该是什么样的最大实际尺寸

我总是可以加载一个巨大的灰色10000x1000px占位符图像，然后使用jQuery的

.width（）

和

.height（）

来计算它实际占用的空间，但这很难达到理想效果。有没有更聪明的方法

谢谢

---

编辑：我可以控制将采用何种方法限制给定图像的最大高度或宽度。此代码将在不同的站点上运行。一个站点可以在图像本身上使用css

max height

。另一个可能具有容器的设定高度。我不知道。无论哪种方式，我都需要在开始缩放或裁剪图像之前计算图像的显示大小。

因此，如果我理解正确，您希望拍摄图像，并根据窗口的高度和宽度调整其大小，对吗

以我创建的一个示例为例，使用%表示高度和宽度。除了使用background size:标记外，还可以选择cover或content

HTML:

---

这可能是一个很好的参考：

如果我理解正确，您希望能够找到图片区域，然后使用服务器端（GD库？）脚本对其进行缩放，然后显示图像

这是为了节省带宽吗

我可能只需要使用jquery调用来查找屏幕的宽度（或者如果您提供了容器填充，则使用容器），然后使用AJAX将宽度维度发送到后端脚本

后端脚本随后将找出所讨论图像的纵横比，将w:h比率的倍数应用于返回数字的宽度和图片的比率，然后将图像缩放到该大小并将其发送回

html

图形后端脚本（back-end script.php）

这样做的一些缺点是：如果有人碰巧调整了浏览器的大小，你要么必须运行一个延迟调用来获取新图像，要么你将被错误大小的图像卡住。此外，如果您为响应性强的web提供6-10种不同大小的图像，您可能会节省更多带宽：

<picture class="n-column-image-above__image tnt tnt-image">
    <!--[if IE 9]>
        <video style="display: none;">
    <![endif]-->
    <source media="(min-width: 1144px)" srcset="../img/img_retailer_icon_1077.png, ../img/img_retailer_icon_2154.png 2x"/>
    <source media="(min-width: 768px)" srcset="../img/img_retailer_icon_707.png, ../img/img_retailer_icon_1414.png 2x"/>
    <source media="(min-width: 375px)" srcset="../img/img_retailer_icon_340.png, ../img/img_retailer_icon_680.png 2x"/>
    <source srcset="../img/img_retailer_icon_290.png, ../img/img_retailer_icon_580.png 2x"/>
    <!--[if IE 9]>
        </video>
    <![endif]-->
    <img src="../img/img_retailer_icon_1077.png" alt="REPLACE WITH IMAGE DESCRIPTION"/>
</picture>

---

您可以通过在文档请求和调整大小时提交ajax请求来实现这一点。 然后将此信息存储到会话中。然后通过PHP ie返回缩放图像：

<img src="image.php?img=someimg.jpg" />

---

暂时将延迟更新放在一边：

看起来您希望将服务器上的图像重新缩放到客户端所需的精确大小，而不是使用CSS在浏览器中调整图像的大小。（请注意，“裁剪”和“重新缩放”是不同的；我假设您实际上指的是“重新缩放”。）

这里有一种方法可以做你想做的事情： 最终，您确实需要在客户端检查容器的宽度和高度——容器的大小在页面加载之前是未知的，因为它取决于用户的视口大小

通过使用图像URL本身作为生成所需图像的信号，可以简化与服务器的通信。在本例中，我为placehold.it构建了图像URL；您可以替换自己的服务器端脚本，该脚本将捕获url请求，从文件名中提取所需的宽度和高度，并返回缩放图像

var reloadImage=function（）{
var w=$（'.container'）.width（）；
var h=$（'.container'）.height（）；
$（'.container img'）.attr（“src”http://placehold.it/“+w+”x“+h）；
};
$（'.container'）.mouseup（重新加载图像）
.container{
宽度：100px；高度：100px；
边框：2倍实心；
调整大小：两者都有；/*请注意，并非所有浏览器都支持“调整大小”；这只是演示，对技术本身并不是必需的*/
显示：内联块；
溢出：自动
}
.container img{宽度：100%；}

调整此容器的大小：

如何定义“最大”图像大小？是由集装箱决定的吗？视口？还有别的吗？你的HTML在哪里？图像应该加载到哪个部分？如果您希望在服务器上裁剪，您使用的是什么服务器端脚本语言、或其他完全不同的语言？获取容器宽度并将其乘以纵横比以获得高度。使用imagemagick之类的工具裁剪服务器端。我已经涵盖了服务器端裁剪。我所要做的就是为图像的最大大小和最大宽度获取一个数值@DavidThomas，我不确定是什么决定了它（视口、容器、其他东西）。它可能是任何东西。我想说的是，如果我加载一个大容量的图像，然后使用jquery.width（）和.height（）我会得到我需要的信息（它实际可以占用多少空间），但这并不实际。我不想加载大量的图片。网站上没有最大图片大小的标准吗？这是你必须定义的东西。如果您甚至无法回答应该如何确定最大图像大小，我们就无法帮助您找到最大图像大小。标记不清楚。这很奇怪-在我看来，这并不像你做的那样复杂或模棱两可。关键是这段代码需要能够运行
<div class="container">

</div>

var width = $('.container').width();
$.post("back-end-script.php", {width:width}, function(data){
    console.log(data); //Do something here with the returned picture
});

$width = $_POST['width'];
$img = thisimage.jpg;
//Not sure what script you're using, but this is where you'd find the
//img width and height
$img_w = /*image width*/
$img_h = /*image height*/
$img_r = $img_h / $img_w; //This will get a percentage
$new_img_w = $width;
$new_img_h = $new_img_w * $img_r; //This will make the height the right size

/* Then from here, convert your image to the right size and echo it back */

echo $new_img;

<picture class="n-column-image-above__image tnt tnt-image">
    <!--[if IE 9]>
        <video style="display: none;">
    <![endif]-->
    <source media="(min-width: 1144px)" srcset="../img/img_retailer_icon_1077.png, ../img/img_retailer_icon_2154.png 2x"/>
    <source media="(min-width: 768px)" srcset="../img/img_retailer_icon_707.png, ../img/img_retailer_icon_1414.png 2x"/>
    <source media="(min-width: 375px)" srcset="../img/img_retailer_icon_340.png, ../img/img_retailer_icon_680.png 2x"/>
    <source srcset="../img/img_retailer_icon_290.png, ../img/img_retailer_icon_580.png 2x"/>
    <!--[if IE 9]>
        </video>
    <![endif]-->
    <img src="../img/img_retailer_icon_1077.png" alt="REPLACE WITH IMAGE DESCRIPTION"/>
</picture>

<img src="image.php?img=someimg.jpg" />

$(function() { 
    function getvp() {
    var vp = { 
        width: $(window).width(), 
      height: $(window).height()
    }
    return vp;
  }
  function submit_vp(vp) { 
     $.ajax({
        method: "POST",
        url: "some.php",
        data: { vpwidth: vp.width, vpheight: vp.height }
  })
  .done(function(msg) {
    //ajax is done
    alert('width: ' + vp.width + ' height: ' + vp.height);
  });
  }

  //Get initial viewport. 
  $(document).ready(function() {
    submit_vp(getvp());
  });
  //Resubmit viewport on resize.
  $(window).resize(function() { 
    submit_vp(getvp());
  });
});