Question

我正在尝试创建包含大量用户创建的HTML的页面的Google AMP版本。

在很多情况下，img标签没有设置高度或宽度属性，图像源是对外部URL的引用。

我考虑过对URL进行请求以获取图像的高度和宽度，然后使用这些值设置高度和宽度属性，但这似乎不是正确的解决方案。

我尝试的另一件事是将高度和宽度设置为任意值，然后尝试通过设置"sendSocketMessage:fail Failed to execute 'send' on 'WebSocket': Still in CONNECTING state."覆盖样式表中的宽度和高度属性，但在这种情况下，图像仍将在方面呈现比率最初宣布。

但回到我原来的问题：如何处理AMP页面的未定义高度和宽度属性的图像？最好的方法是什么？

Answer 1

大多数情况下，你有一个特殊比例的图像。如果你没有实际尺寸，但你可以声明的比例如下：

<amp-img src="image.jpg" width="16" height="9" layout="responsive"></amp-img>
or
<amp-img src="image.jpg" width="4" height="3" layout="responsive"></amp-img>

宽度和高度仅用于计算布局中的空间。 layout="responsive"使图像100％适合顶层。 Usaly 100％宽度和高度的比例。

Answer 2

您可以使用以下内容：

amp-img {
  height: 100%;
  width: 100%;
  max-width: 100%;
  max-height: 100%;
}

唯一的问题是，如果图像小于设备的宽度，它会拉伸图像并导致一些像素化，但它会保持相同的宽高比。

Answer 3

使用PHP的解决方案

AMP需要在每个页眉中添加内联放大器自定义样式表。

在主文件的标题中，设置$imgsizeArr = getimagesize('serverLocationOfFile') $ imgsizeArr [0]是px中的宽度。 $ imgsizeArr [3]是字符串，width =＆＃34; 50＆＃34;高度=＆＃34; 100＆＃34;，用于HTML代码。

样式表是获取图像宽度后的include_once的php文件。在样式表文件中，回显周围标记的标记（id，class或其他）中图像的宽度。也就是说，宽度必须在围绕标签的标签中定义。

，例如，在主程序中，

if (file_exists('/myserver/myimg.jpg') {
  $imgsizeArr = getimagesize('/myserver/myimg.jpg');
  $thisimgwidth = $imgsizeArr[0];
  $thisimgstring = $imgsizeArr[3];

} else {
  //set it to something else
}

include_once 'amp_cust_style_sheet.php';
...
<div class="myamp_img">
  <amp-img src="/myimg.jpg" <? echo $thisimgstring; ?> layout="responsive" alt="" noloading="">
  </amp-img>
</div>

在php的样式表中，包含在下面的标题中，你得到变量$ thisimgwidth，

<style amp-custom="">
...
.myamp_img { width : <? if (!empty($thisimgwidth) echo $thisimgwidth; else echo '0'; ?>px }
</style>

应该这样做。您可以使用类似的东西来通过改变包装器标签的宽度来设置静态高度。

如果您有一系列图像，可以使用php动态地将类添加到样式表中，而不是尝试预测您将拥有多少图像。

HTH！

如何使用AMP页面的未定义高度和宽度属性处理图像？

3 个答案: