在最长边上调整图像大小[重复]

Posted 2023-03-05

【中文标题】在最长边上调整图像大小[重复]

【英文标题】：Resizing image base on the longest side [duplicate]

【发布时间】：2016-10-01 14:39:31

【问题描述】：

我正在尝试找到一种方法来根据最长边重新调整图像 (.jpg) 文件的大小。垂直和水平拍摄的图像将有不同的最长边，我试图将它们放入大小固定的 div（内联块）中。如果我只控制宽度或长度，它们将不会按比例缩放（压扁）。

我已阅读“CSS Equivalent of the “if” statement”，似乎有一种类似/可能的方法我可以使用...找到最长的边（宽度或高度），然后为此添加 2 个 css。

也许是下面的内容？ （页面是基于 html 的）

CSS

img.thumb  identify longest side //not quite sure how to go about this

img.thumb width 
  width:200px;
  height:auto;
  border:0px;


img.thumb height
  width:auto;
  height:200px;
  border:0px;

我不希望这样做，但我是否需要使用 JQuery 代替（例如，查找图像宽度和长度，如果宽度 > 长度则将“宽度”添加到类中）

【问题讨论】：

您确定如何调整大小的规则是什么？就像图像具有更大的宽度一样，预期的行为是什么，反之亦然？如果宽度和高度相同，会发生什么？

@Mikey 感谢您的评论。首先，宽度和高度不会相同（这是确定的）。我正在尝试为重新调整大小创建 2 个规则。 A）当宽度大于高度时，将宽度重新调整为 200 像素，高度为自动。反之亦然 B) 高度。由于我不确定如何“确定哪个宽度或高度更长”，我将其重新调整为固定宽度：200px；高度：目前为 150 像素。

您正在寻找的是object-fit - 尚不支持所有浏览器，但有一些变通方法。如果你没事通过将它们设为背景图像，background-size 可以用于相同的效果（并且浏览器支持要高得多。）

@CBroe，感谢您的评论和建议。我不熟悉背景图片和背景匹配。可以举个例子吗？

【参考方案1】：

使用 javascript 来执行此操作。

http://www.w3schools.com/js/js_htmldom_methods.asp

var thumbImage = document.getElementById("your-image-id").style ;
//Your calculation in some variable x , y
var thumbImage.width = x ;
var thumbImage.height = y ;

【参考方案2】：

我相信这完全可以通过 CSS 来实现。

.thumb 
  display: inline-flex;
  width: 200px;
  height: 200px;
  vertical-align: middle;
  border: 1px solid gray;

.thumb img 
  max-width: 200px;
  max-height: 200px;
  margin: auto;

<div class="thumb">
  <img src="https://dl.dropboxusercontent.com/u/30527718/tall.jpg"/>
</div>
<div class="thumb">
  <img src="https://dl.dropboxusercontent.com/u/30527718/wide.jpg"/>
</div>

或Codepen demo

【讨论】：

好主意！使用display:inline-flex 在 Firefox 和 IE 中不起作用，但使用 table-cell 或 float 在所有浏览器中都可以正常工作。

@Lounge，非常感谢。有用！！但我有一个问题，它不会像你的那样与中心对齐。可能是什么问题？ jsfiddle.net/2tc5Lh3m

如果您使用flex 或inline-flex 以justify-content:center; 居中元素

@Maki，我的荣幸！乐意效劳。在您的小提琴中，您的<img> 标签上缺少margin: auto。 Updated fiddle

@Maki 正确，无论 的直接父级是什么，都需要拥有所有 display: inline-flex, width, height, etc。本质上是this is how I'd do it。另外，这是对margin:auto works

的一个很好的解释