html - 不知道图像大小的图像最大宽度

Question

我想知道是否有一种方法可以使用 CSS 在不知道图像宽度的情况下设置网站中图像的 max-width？

现在，我的 CSS 中有这个集合:

img {宽度:100%；高度:自动；显示: block ；

这将设置所有图像以填充浏览器的整个宽度并在浏览器调整大小时 flex 。

我唯一想知道的是，如果用户将图像上传到 CMS(在本例中为 Wordpress)，我如何才能获得该图像的宽度，以便可以设置 max -图像的宽度，这样它就不会一直拉伸(stretch)开来，而不必在 CSS 中设置通用值？ CSS 有什么办法，还是我必须走 javascript 路线？

我问的原因是我不确定用户可能会在其网站上添加/更新的某些图像的尺寸。

过去我总是在特定类中声明 max-width 值(示例):

.post img {max-width: 300px;}

这很好，因为我事先知道图像的宽度。但正如我之前提到的，我不确定某些图片上传并添加到网站时的宽度。

Answer 1

显然，当您预览每张图片时，您需要最大宽度值。

如果你把这张图片放在一张 table 里怎么样你想要并且有你想要的 max-width (根据你的屏幕宽度)并将图像宽度设置为表格宽度的100%。例如

<table style="width:50%">
  <tr>
    <td>
      <img src="your.img.url" style="width:100%"/>
    </td>
  </tr>
</table>

当然，每次调整浏览器大小时，图像都会被拉伸(stretch)或者即使原始图像宽度小于您的表格宽度