Question

目前我的网站已设置，其中加载了其中的完整图像，然后自动调整大小以适合屏幕。这是通过在CSS中将图像宽度设置为100％来完成的。虽然它确实很好用，但它似乎没有遵循标准，因为我没有在图像标签本身中指定宽度和高度。

我现在的想法是创建同一网页的多个版本，其中唯一的区别是图像的大小。每个图像都有自己的文件名（如image1small.jpg，image1medium.jpg等）。

问题是大多数人想要立即看到更大的图片，但这对于小屏幕的用户来说并不顺利，因为他们必须水平滚动才能看到整个事情。

我在考虑将javascript设置在顶部，将不符合屏幕条件的用户重定向到具有更好尺寸图像的页面。像这样：

<html>
<head>
<script>
    if (screen.width < nnn){window.location.href="smallerpicture.htm";}
</script>
</head>
<body>
<p>some random text</p>
<img src="image.jpg" width=nnn height=yyy>
</body>
</html>

对于不符合页面屏幕分辨率要求的人，会发生页面重定向。我不确定这是否可以作为谷歌的偷偷摸摸的重定向。

使用上面显示的代码将屏幕尺寸不兼容的用户重定向到正确的页面是一种很好的做法吗？或者我应该采用不同的方法向用户显示正确尺寸的图像？

无论有人给出什么答案，我觉得我需要指定图片标签的宽度和高度属性，我想坚持HTML 4.01严格标准，以便该页面适用于所有人。

Answer 1

HTML 5标准的初稿旨在为所有人服务 - 它基本上记录了“浏览器实际执行的操作”，而不是应该执行的浏览器。

指定宽度和高度属性背后的基本原理是，即使在图像加载之前，它也会在页面上保留空间，从而无需在图像加载时重新流动内容。

选择指定属性，然后重定向页面，将导致比使用没有属性的％width更糟糕的重新渲染。因此，我认为您的担忧是没有根据的，因为您的药物比疾病更糟糕。

服务器不同图像大小的需求是响应式图像的用例之一，因此您可以将其视为一个选项，而不是重新加载页面。有几个回退可以为您提供广泛的浏览器支持。

响应式HTML图像使用图像标记中的宽度和高度值

1 个答案: