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

Question

我正在尝试找到一种方法来根据最长边重新调整图像 (.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 代替（例如，查找图像宽度和长度，如果宽度 > 长度则将“宽度”添加到类中）

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

Answer 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