whay可以't我使用javascript同时更改图像的高度和宽度

whay can't I change both image height and width at same time with javascript?

本文关键字：图像 高度 javascript 可以 whay      更新时间：2023-09-26

我在div中有一个图像，我希望图像始终居中。

如果图像的宽度比屏幕宽，那么我希望图像扩展到观察端口的宽度。如果图像比观察端口的高度短，那么我想要它扩展到观察港口的高度。

在我的代码中，当我扩展宽度时，高度会自动扩展，这很好，因为我不必计算它。高度也做同样的事情。当高度展开时，宽度保持成比例。

但是，如果宽度的变化使高度现在小于视图端口，那么我需要检查高度并将其恢复到视图端口高度（这应该会再次扩展宽度，但不会）。当我必须同时改变高度和宽度时，自动比例就不起作用了。如果我做一个或另一个，它确实有效。

我如何才能做到这一点，使它们既可以更改又可以工作而不扭曲图像？

我的代码：

inner_width =  $(window).innerWidth();
inner_height =  $(window).innerHeight();

if (inner_width < original_pic_width ) {
   $(pic).css({'width': original_pic_width});
}   
else {
   $(pic).css({'width' : inner_width });
}
if (inner_height < original_pic_height){
   $(pic).css({'height': original_pic_height});
}
else {
   $(pic).css({'height' : inner_height });
}

CSS contain非常不错。

$("div").css({
  backgroundImage: "url(" + $("img").prop('src') + ")",
  backgroundSize:"contain",
  backgroundRepeat: "no-repeat"
});
div { width:200px; height:200px; border:1px solid red;}
div img { display:none }
<div>
  <img src="http://www.somebodymarketing.com/wp-content/uploads/2013/05/Stock-Dock-House.jpg"/>
</div>
<script src="https://code.jquery.com/jquery-2.2.3.min.js"   
        integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo=" 
        crossorigin="anonymous"></script>

这里有一个可能的解决方案（但不一定能清楚地理解您想要什么）。请注意，我并不完全确定居中方法是否是跨浏览器的。

var div = $("div");
var img = $("img");
var imgw = img.width();
var imgh = img.height();
var imgr = imgw / imgh;
var sizes = [300, 120];
var i = 0;
setInterval(function () {
  div.width(sizes[i]);
  i = (i + 1) % 2;
  adjust();
}, 1000);
function adjust () {
  var divw = div.width();
  var divh = div.height();
  var divr = divw / divh;
  if (divr < imgr) {
    img.width("100%");
    img.height("auto");
  } else {
    img.width("auto");
    img.height("100%");
  }
}
div {
  position: relative;
}
img {
  display: block;
  position: absolute;
  top: 0; bottom: 0;
  right: 0; left: 0;
  margin: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="width:120px;height:120px;border:10px solid #5900CC;">
  <img style="width:100%;" src="https://i.stack.imgur.com/jKXi2.jpg" />
</div>

如果同时设置高度和宽度。。。将设置尺寸、高度和宽度。

如果设置宽度=视口的宽度（如果是水平的（宽度>高度））或高度=视口的高度（如果是垂直的），则只设置一个维度就足够了。

查找需要更改的维度，然后只更改该维度。您可以通过检查图像的宽度和窗口的innderWidth之间的差异，以及图像的高度和窗口的innerHeight之间的差异来实现这一点。无论哪一个差异更大，你都只需要改变。这应该照顾到另一个维度，而不必同时调整两个维度的大小。

相关文章：