如何在CSS中不知道尺寸时增加图像的宽度？

Question

我有像

这样的图片标签

<img />

然后我动态下载图像链接，然后将图像src设置为该链接。我不知道链接中图像的尺寸。有没有我可以使用的CSS代码，以确保图像的宽度正好是200px（没有裁剪，只是伸展到适合），图像的高度是否与原始图像相同？ （因此，当原始尺寸未知时，基本上只是水平刻度）。无论我尝试什么，它似乎都保持了宽高比。

由于

以下是一个示例：我正在动态加载此图片：

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

Answer 1

这就是你要找的东西。

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是一个非常灵活的容器，是你需要的，你可以随意改变它。

修改

通过下面的评论，我决定修改图像的包装，以强制图像失去它的纵横比。首先，我使用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至