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

Posted 2023-03-05

【中文标题】当 CSS 中的尺寸未知时如何增加图像的宽度？

【英文标题】：How to increase width of image when dimensions are not known in CSS?

【发布时间】：2016-05-06 00:44:09

【问题描述】：

我有一个像

这样的图片标签

<img />

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

谢谢

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

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

【问题讨论】：

你为什么不使用style ？因此<img src="" style="width:200px;">

保留纵横比。

不，它应该拉伸以适应。让它水平拉伸以适合水平，并保持与原始图像相同的垂直高度。

那么我在哪里指定 200px 呢？

即保留纵横比。就我而言，我确实不希望它保持纵横比。

【参考方案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 如果它有效。我没有在小提琴上使用正确的命名，请忽略。

【讨论】：

问题是没有.js

啊，我的错。如果 OP 想引用它 :) 但您的解决方案也很有效。由于 OP 前面提到过，在这种情况下，它将针对图像数量，以最小的更改保持现有的 html 代码可能是有用且简单的。

@pratikwebdev 我同意你的回答，但我想知道为什么 OP 只指定 CSS 开头

@AGE 同意！可能是 OP 没有在现有代码中使用 JS，因此它可能没有超过 OP 的想法。我只是在更广泛的基础上提出了这个解决方案，考虑到编码的多个元素和相关工作。

【参考方案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 个浏览器中获取。其他图像也是如此。

【讨论】：

这似乎保留了纵横比，这不是我想要的。我希望高度保持与原始图像高度相同。

您希望所有图像的高度都相同吗？

我在原始帖子中放了一张示例图片。

是的，与原始图像高度相同。

@omega 再次检查。是这样吗？

【参考方案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" >
</div>

随意玩.wrapper到

【讨论】：

我不确定这是否有效。你能把占位符图片改成 400 宽和 200 高，看看能不能用？

它似乎也保留了纵横比

我在原始帖子中放了一张示例图片。

@omega 抱歉耽搁了，现在正在工作中。现在正在编辑我的帖子

@omega 我已经修改了我的答案，如果有帮助请告诉我。