javascript - 有什么方法可以让图像自行调整为固定分辨率但看起来不会很奇怪吗？

Question

我的意思是从字面上看就像无论如何都会拍摄肖像图像并将其设置为横向尺寸以及额外的背景(例如用于填充)以便图像看起来不会奇怪？

比如这张是原图:

现在这里由于我将高度和宽度设置为固定值而扭曲了:

那么有没有什么方法可以将这张肖像图片变成基于风景的图片，并且一切都完美显示好吧，不仅仅是通过更改分辨率，而是我的意思是字面意思是调整图片的大小，然后为图片添加额外的背景这样图片才不会显得奇怪？

在 HTML、CSS、PHP、JS 中是否可行？

Answer 1

尽管其他答案都表明了这一点，但我还是要反其道而行之，我认为在这种情况下为每个图像添加 CSS 规则是不合适的，因为它看起来像是在创建某种类型的的画廊。最好只使用 <img>标记就在你的 HTML 中，这样你就可以动态生成 src没有过于复杂的事情:

.container {
    border: 1px solid #777;
    text-align: center;
    padding: 10px;
    margin: 10px;
}
.container img {
    max-height:100%;
    max-width: 100%;
    vertical-align: middle;
}
.helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

<div class='container' style="width:200px;height:200px">
  <span class="helper"></span><img src="/image/5ZNYR.png">
</div>
<div class='container' style="width:400px;height:200px">
  <span class="helper"></span><img src="/image/5ZNYR.png">
</div>
<div class='container' style="width:200px;height:400px">
  <span class="helper"></span><img src="/image/5ZNYR.png">
</div>

只需确保 .helper 之间没有任何空格即可和 img .它应该适用于任何尺寸的容器和图像。