我是否坚持为图像标签强制固定图像大小？

Question

我有一个包含侧边栏的网站，有时还包含一个非常大的图像（大约 800 像素宽），但我编写了代码脚本，这样如果屏幕分辨率太小，图像就会缩小并缩放到根据我测试网站的多个浏览器，小 space 非常完美。我使用 powermapper 的 sortsite 演示版测试了网站：

http://try.powermapper.com/Demo/

然后继续抱怨 "Omitting IMG WIDTH or HEIGHT attributes means page text jumps about as images load. Usability.gov 14:3"

我了解并尝试包含这些属性，但图像无法正确缩放。

这是 CSS 如果我的显示器最大屏幕宽度为 800 像素，我会在图像本身上对其进行缩放：

@media screen and (max-width: 600px){#X IMG{width: 100%}}

我指定 600px 是因为我为侧边栏预留了 200 像素。

我不认为 javascript 会是一个答案，因为在页面加载期间，图像占位符会跳转到新的大小，如果我将代码放在开头附近，它会延迟页面的其余部分无法加载。

我也在考虑使用 div 标签并为图片设置背景，但问题是用户无法保存它，我网站上的其他图片都是一部分CSS 精灵 sheet.

我也在寻找一种解决方案，即使 javascript 被禁用，也能与尽可能多的网络浏览器一起使用。

有什么想法可以回答吗？

Answer 1

尝试设置宽度和高度，然后仅使用媒体查询调整宽度和高度（而不是最大宽度和百分比宽度）。那么你应该不会遇到任何缩放问题。

Answer 2

这条规则虽然正确，但在 window 响应式设计应运而生时就被淘汰了：

Omitting IMG WIDTH or HEIGHT attributes means page text jumps about as images load. Usability.gov 14:3

如果您总是要使用给定的纵横比，那么您可以按如下方式设置您的代码。如果您在 img 标签上设置 width 和 height 属性，并在 CSS 中设置 max-width: 100%（或类似属性），就像人们在开发时经常做的那样响应式网站，那么当图像加载时你的文本仍然会跳来跳去，因为它的初始高度将是你在标记中指定的高度，然后当图像加载时，浏览器将保持 max-width: 100% 所需的纵横比工作并最终缩小高度 - 所以这也不能真正帮助您遵守可用性规则。

.img { 
    background-size: cover; 
    background: center no-repeat;
  }

.ar {
  height:0;
  padding: 0 0 56.25% /* 16:9 aspect ratio */
}

<div class="img" style="background-image: url(https://placekitten.com/g/500/500);">
  <div class="ar"></div>
  </div>

Answer 3

@media screen and (max-width: 600px){#X IMG{width: 100%}}

这意味着 IMG 将具有其第一个父级的完整宽度。该父项可能不是 X 元素。你确定要那个吗？
示例：

<div id='X'>
    <div><div><div><div>
         <img src=''>
    </div></div></div></div>
</div>

如果您尝试修复将 height:auto; 放在 width:100%; 之后的 x:y img 比率计算 width 或 height 并始终对其他属性使用 auto 以保持图像缩放。

我是否坚持为图像标签强制固定图像大小？

Am I stuck with forcing fixed image size for image tags?

html

javascript

css

image

responsive-design