获得理想裁剪的最大可能大小<img/>

时间：2016-08-19 20:57:51

标签： javascript html image

我之前发过一个类似的问题，但我不认为我说得很清楚。

如果我有基本的响应式图像，例如<img src="http://www.example.com/nicephoto.jpg">

让我们说nicephoto.jpg是一张大图片（4000x5000像素）。我可以加载整个图像，让它按照自己的css或容器的css缩放或被浏览器裁剪 - 但理想情况下我想请求服务器向我发送一张已完全适合的图像我需要的尺寸。 编辑：我的问题不是如何进行服务器端裁剪 - 我已经覆盖了这一点。我的问题如下：

如何查看图像的最大宽度和高度，直到某些图像被截断或图像缩小？换句话说，这个图像应该是最大的实际尺寸是什么？

我总是可以加载一个巨大的灰色10000x10000px占位符图像，然后使用jQuery＆＃39; .width()和.height()来计算实际占用的空间，但这几乎没有效率或理想。有更聪明的方法吗？

谢谢！

编辑：我不可以控制将使用哪些方法来限制给定图像的最大高度或宽度。此代码将在不同的站点上运行。一个站点可能在图像本身上使用css max-height。另一个可能具有容器的设定高度。我不知道。无论哪种方式，我都需要弄清楚图像在开始缩放或裁剪之前显示的大小。

4 个答案:

答案 0 :(得分：2)

暂时将更新后期设置为：

您希望将服务器上的图像重新缩放到客户端所需的确切大小，而不是使用CSS在浏览器中调整图像大小。 （注意＆＃34; crop＆＃34;＆＃34; rescale＆＃34;是不同的东西;我假设你真的是指＆＃34; rescale＆＃34 ;.）

以下是您尝试做的事情的一种方式：

您最终需要在客户端检查容器的宽度和高度 - 在页面加载之前无法知道容器大小，因为它取决于用户的位置视口大小。

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

＆＃13;
＆＃13; 
var reloadImage = function() {
  var w = $('.container').width();
  var h = $('.container').height();
  $('.container img').attr("src", "http://placehold.it/"+w+"x"+h);
  };
$('.container').mouseup(reloadImage);
＆＃13; 
.container {
  width: 100px; height: 100px;
  border: 2px solid;
  resize: both; /* Note that not all browser support "resize"; it's just for demo here, not essential to the technique itself */
  display: inline-block;
  overflow:auto
}

.container img {width: 100%;}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Resize this container:<br>
<div class="container"><img class="image" src="http://placehold.it/100x100"></div>
＆＃13;
＆＃13;
＆＃13;

（请注意，没有必要按照您的建议创建一个＆＃34;大量＆＃34;占位符图像 - 单个像素图像，缩放到100％宽度和高度的CSS将会这样做。没有占位符图像当然，当然。）

这就是为什么你不做你正在尝试做的事情：

  • 它将破坏图像的浏览器端缓存（因为每个负载可能需要不同的图像），有效地增加了带宽使用而不是保存它。
  • 与下载大于必要的图像相比，服务器重新缩放图像所花费的时间将比保存的成本高得多（或者，您必须在其上缓存许多不同大小的变体。图像服务器将根据需要分发。）
  • 加载后调整窗口大小会触发新图像生成（浪费带宽和服务器时间）或导致可能尺寸过小的图像。太小的图像看起来比缩小太大的图像要差得多。

这是你应该做的事情

创建三个或四个不同大小的图像，每个图像都比典型的用例（想想桌面，平板电脑，移动设备）大一些，并使用@media查询根据屏幕大小选择一个。{1}}查询。使用浏览器内缩放功能将所选图像调整为所需的精确尺寸。

.foo {  
  background:url('foo_default.png') no-repeat 50% 50% fixed;
  background-size: cover;
} 
@media only screen and (max-width: 400px) {
    .foo { background-image: url('foo_small.png'); }
}
@media only screen and (max-width: 800px) {
    .foo { background-image: url('foo_med.png'); }
}
@media only screen and (min-width: 800px) {
    .foo { background-image: url('foo_large.png'); }
}

但是等等，有更新

  

我无法控制将采用哪种方法来限制给定图像的最大高度或宽度。此代码将在不同的站点上运行。一个站点可能在图像本身上使用css max-height。另一个可能具有容器的设定高度。我不知道。无论哪种方式，我都需要弄清楚在开始缩放或裁剪之前图像的显示大小。

这使事情变得更加复杂 - 现在您不仅需要在客户端检测容器宽度和高度，还需要解析可能影响图像并改变其显示大小的任何客户端CSS。

您可以在图片上使用window.getComputedStyle()来获取适用的CSS规则列表;确定它们的影响会有点复杂。例如，在this question的答案中部分实现了这一点，尽管它只包含一些可能影响图像或背景图像大小的CSS规则 - 对于一般情况而言 - 目的解决方案你基本上做的工作与浏览器首先做的工作一样。

不言而喻，让每个网站首先只是请求尺寸合适的图像会更简单。

答案 1 :(得分：0)

您可以通过在文档请求上提交ajax请求以及调整大小来执行此操作。 然后将此信息存储到会话中。然后通过PHP返回缩放的图像，即：

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

你说你有服务器端覆盖所以javascript看起来像这样：

$(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());
  });
});

答案 2 :(得分：-1)

因此，如果我理解正确，您正在寻找一张图片，并根据窗口的高度和宽度调整大小是正确的吗？

使用％作为高度和宽度，查看我创建的JSFiddle作为示例。除了使用background-size：标签外，您还可以选择封面或内容。

HTML：

<body>
<div class="box1">
<span></span>
</div>
</body>

CSS：

html, body {
  height: 100%;
}
.box1 {
  background: url(http://cdn.wallpapersafari.com/23/44/2mYJfU.jpg) no-repeat;
  height: 100%;
  width: 100%;
  background-size: cover;
}

这可能是一个很好的参考：CSS3 Background-size

答案 3 :(得分：-1)

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

这是为了节省带宽吗？

我可能只是使用jquery调用来查找屏幕的宽度（或者如果你给容器填充一个容器），然后使用AJAX，将宽度维度发送到你的后端脚本。

然后，后端脚本会找出相关图像的宽高比，将w：h比率的倍数应用于返回数字的宽度和图片的比例，然后将图像缩放到尺寸并寄回。

HTML 

<div class="container">

</div>

的javascript 

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

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

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

这样做的一些弊端：如果有人碰巧调整了浏览器的大小，你要么必须运行延迟调用才能获得新图像，否则你将陷入错误尺寸的图像。此外，如果您为响应式网站提供了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>
相关问题
最新问题