如何在 <img> 标签内始终以全尺寸显示图像答案

【问题标题】：how to display an image inside <img> tag always in full dimension如何在 <img> 标签内始终以全尺寸显示图像
【发布时间】：2011-01-27 11:18:45
【问题描述】：

我有一个带有动态变化图像的 img 元素。我一直想完整地展示这张图片。

所以，我认为，我必须动态更改 img 标签中的宽度和高度属性。

如何在 php 或 javascript 中执行此操作？

【问题讨论】：

标签： php javascript html image

【解决方案1】：

只要去掉宽度和高度属性（和样式）就可以了。如果你以后需要知道它，你可以从计算的 CSS 中获取它。

【讨论】：

+1 您还可以使用max-width 和max-height 来防止太大的图像破坏布局。
省略宽度和高度不会影响 xhtml 验证吗？
@understack，不，省略 alt 标记会产生警告，但规范既不需要 height 也不需要 width。虽然它们对于浏览器提前知道很有用，但可以根据适当的尺寸绘制页面，而无需先等待图像加载（并可能触发重新绘制）。

【解决方案2】：

你不能没有宽度和高度尺寸吗？据我所知，如果您不定义宽度和高度，浏览器会显示整个全尺寸图像。大多数现代浏览器都是这样。

【讨论】：

【解决方案3】：

假设您关心 alt、height 和 width 属性（您应该），从 javascript 数组中读取图像属性可能很适合您。这是一个在 jQuery 中插入随机图像的示例，您可以将随机图像逻辑换成您想要渲染的任何类型的幻灯片等。

$(document).ready(function() {

  var imageArray = new Array ();
  imageArray[0] = new Array ( "jungle.jpg",   "http://rmportal.net", "Jungle", "400", "300");
  imageArray[1] = new Array ( "mountain.jpg", "http://rmportal.net", "Mountain" , "350", "290");
  imageArray[2] = new Array ( "ocean.jpg",    "http://rmportal.net", "Ocean" , "442", "530");

  var max = imageArray.length;
  var num = Math.floor((Math.random() * max));

  var hstring = "<a href='" + imageArray[num][1] + "'><img src='" + imageArray[num][0] + "' alt='" + imageArray[num][2] +  "' height='" imageArray[num][3] +  "' width='" + imageArray[num][4] + "' /></a>"

  $('#my-image').html(hstring);

});

【讨论】：

【解决方案4】：

如果您希望在 HTML 中保留 width 和 height 属性，那么在 PHP 中您需要 GD 库中的 getimagesize 方法。

【讨论】：

【解决方案5】：

如果页面加载时图像的宽度和高度作为属性包含在源代码中，第一次更改源时使用removeAttribute('width') 和'height'。

如果您不希望页面在下载缓慢时“崩溃”，请预加载图像并更改 src 在 img.complete 为 true，如果它被缓存，则立即，或图像 onload 触发后。

【讨论】：