如何调整从其他用户加载的图像的大小，以便保持尺寸，同时使用 css 设置最大宽度和高度?(HTML/JS/CSS）

How to size images loaded from other users such that dimensions are maintained yet a max width and height are set with css? (HTML/JS/CSS)

本文关键字：设置 css CSS 高度 JS HTML 其他 用户 调整 何调整 加载      更新时间：2023-09-26

我想知道如何在div元素中从API加载图像(用户可以在其中发布他们想要的任何大小的图像(，然后我可以格式化该图像以满足CSS的以下要求。
1(保持原始尺寸

2( 给定我指定的最大宽度和最大高度，不受我控制的图像属性与我的规范中的相应属性差异最大，将被缩小以匹配它，另一个属性缩小以保持尺寸。 如果图像实际上在两个维度上都小于我的规格，则图像的尺寸与其相应的规格差异最小，则应增长以匹配它，另一个图像再次移动以保持尺寸。

3(图像应该在其父节点中居中，这取决于它是宽度还是未达到最大值的高度规范(即：如果max_width是200px，图像宽度只有180，那么它应该沿着x轴居中(。

我想我可以用 JS 做到这一点，但我想这是一个足够普遍的愿望，有一种比逻辑输入它更容易的方法。 (另外，如何使用JS访问来自JSON文件的用户上传图像的高度和宽度属性，以及如何在JS中将图像居中到其父节点中？

JS/伪代码组合看起来像这样，但如果可能的话，我想知道如何在 CSS 中做到这一点：

var body = document.getElementsByTagName('body')[0];
$(document).ready(function(){
    var maxHeight = whateEverWeSpecify;
    var maxWidth = whateverWeSpecify;
    $.getJSON('jsonFileWithPropertyImagePointingToUserUploadedImage', formatImg);
  });
function formatImg(json){
 var div  document.createElement('div');
 var img = document.createElement('img');
 img.setAttribute('src', json.image);
 **//this is the part   I dont know how to read dimensions of** incoming image so ill use img.height and width.height to refer to dimensions of incoming JSON img here 
 var heightDifference = img.height - maxHeight;
 var widthDifference = img.width - maxWidth;
 if (widthDifference < 0 && heightDifference < 0){
   if (heightDifference < widthDifference){
     img.style.height = img.height + heightDifference;
   } 
   else{
     img.style.width = img.width + widthDifference;
   }
 }
 else{
  if (heightDifference > widthDifference){
    img.style.height = img.height - heightDifference
  }
  else{
    img.style.width = img.width - widthDifference
  }
  /*sizes are adjusted to fit specifications at this point.  I have no idea 
  how to center the image along the y or x axis depending on which one is 
  required other than that we can determine which to change based on which 
  attributes difference from the specification is greater than 0 (in 
  essence, which attribute was updated), so if you could help me with this 
  too for future reference I would greatly appreciate it */
 }
}

尝试使用 'background-image' 属性设置div，并使用 'background-size：contain'。

在尝试处理我正在建立的约会网站中的个人资料图片时，我遇到了同样的问题。 您永远不知道用户是要上传高图片还是宽图片。

.HTML：

<div class="outer">
  <div class="image_container"></div>
</div>

.CSS：

.outer {
    background:lightgray;
    width:800px;
    height:500px;
}
.image_container {
    position:relative;
    height:80%;
    width:80%;
    left:10%;
    top:10%;
    background-image:url('http://icatcare.org/sites/default/files/kcfinder/images/images/aggressive-cat_0.jpg');
    background-repeat:no-repeat;
    background-size:contain;
    background-color:darkgray;
    background-position:center;
}

这是代码笔。 取消注释第二个背景图像行，看看它如何处理高图像：居中背景图像。

我在内部div 上放了一个深灰色的背景，只是为了向您展示div 保持您设置的比例，CSS 处理其中不同大小的图像。 此解决方案至少可以防止您的布局因图像大小的变化而奇怪地浮动或换行。

不要使用 <img> 标签。请改用 CSS 中的 background-image 属性。这使您可以访问 background-size:contain; ，这将完全按照您所说的去做。

https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

例如：

<style>
  .userpic{
    width:400px;
    height:400px;
    background-size:contain;
    background-position:center center;
    background-repeat:no-repeat;
  }
</style>
<div class="userpic" style="background-image:url(myimage.jpg)"></div>

也许你不再需要这个了，但是...要获取图像的原始尺寸，请执行以下操作：

var imgWidth = img.naturalWidth;
var imgHeight = img.naturalHeight;

摆在我面前的答案几乎解决了用 css 调整图像的问题......除了通过 JavaScript 将图像放入容器背景的代码：

function formatImg(json){
    var node = document.getElementById('yourNodeId'); // This is the node where you want to put the image (a div maybe, or the document's body)
    var div = document.createElement('div'); // This will be the image's container
    div.classList.add('image_container');
    div.style.backgroundImage = "url(json.image)";
    node.appendChild(div);
    }

只需添加我之前提到的样式即可解决问题

相关文章：