当 CSS 中的尺寸未知时如何增加图像的宽度？

Question

我有一个像

这样的图片标签

<img />

然后我动态下载一个图像链接，并将图像 src 设置为该链接。我不知道链接中图像的尺寸。是否有我可以使用的 CSS 代码来确保图像的宽度正好是 200 像素（没有裁剪，只是拉伸以适应）并且图像的高度与原始图像的高度相同？ （所以当原始尺寸未知时，基本上只是一个水平比例）。无论我尝试什么，它似乎都保留了纵横比。

谢谢

这是一个示例：我正在动态加载此图像：

我不知道它的尺寸，但最后，我希望它看起来像（假设它的宽度是 200px）。

Answer 1

这就是你要找的。​​p>

function formatImage(t)
{
    //var t = document.getElementById("idOfImg");
    alert(t.naturalWidth + " " + t.naturalHeight);
    t.height = t.naturalHeight;
    t.width = "200";

}

在您希望此行为的每个 image 上添加 onload=formatImage(this);

JSFiddle https://jsfiddle.net/94rzcLh6/

Lmk 如果它有效。我没有在小提琴上使用正确的命名，请忽略。

Answer 2

这个怎么样：

css:

.content{
  display:table;
}

.thumb{
  width:200px;
  height:100%;
  display:table-cell;
  vertical-align:top;
}

.thumb .in, .thumb .in img{
  width:100%;
  height:100%;
}

html:

<div class="content">
  <div class="thumb">
    <div class="in">
      <img src="http://www.planwallpaper.com/static/cache/7b/30/7b306aff620b08d0eefdb6b37f57abc8.jpg" />
    </div>
  </div>
  <div class="thumb">
    <div class="in">
      <img src="http://www.planwallpaper.com/static/cache/a6/4f/a64ffdfc06a8bea4ed2e62f2a44b063d.jpg" />
    </div>
  </div>
  <div class="thumb">
    <div class="in">
      <img src="http://www.gettyimages.es/gi-resources/images/RoyaltyFree/113198687.jpg" />
    </div>
  </div>
</div>

jsfiddle

在 jsfidle 示例中，我检查了高度并保留它。从 2 个浏览器中获取。其他图像也是如此。

Answer 3

您需要将图像包装在一个容器中，该容器可以帮助您保留要在图像上应用的200px 约束。高度会适应宽度，因为你不必担心它。

下面的示例显示了您可以对来自 placeholdit 的自定义尺寸图像执行哪些操作，您可以根据需要对其进行修改。我还建议您使用.wrapper 宽度来确定您希望应用的任何更改，例如添加width: 200px; width: auto;...这个.wrapper 是一个非常灵活的容器，这就是您所需要的，您可以随心所欲地改变它。

编辑

通过下面的 cmets，我决定修改图像的包装器以强制图像失去其纵横比。首先，我使用的是position: absolute（你也可以使用position: fixed）。我还使图像尺寸与.wrapper 尺寸完全不成比例，以进一步说明丢失纵横比的必要性。

注意：由于这只是一个演示，我不担心多个图像以及如何正确定位它们（​​这完全是另一个问题）。

.wrapper {
  width: 200px; 
  height: 100%; 
  position: absolute; 
  left: 0; 
  top: 0;
}

.wrapper img {
  width: 100%;
  height: 100%;
}

<div class="wrapper">
  <img src="http://placehold.it/1500x1000" alt="some image">
</div>

随意玩.wrapper到