我是不是一直在为图像标签强制固定图像大小

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

本文关键字：图像 标签 是不是 一直      更新时间：2023-09-26

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

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

然后它继续抱怨说，"省略IMG WIDTH或HEIGHT属性意味着页面文本会随着图像加载而跳跃。可用性.gov 14:3"

我理解这一点，并试图包含这些属性，但图像缩放不正确。

这是我在图像本身上使用的CSS，如果我有一个最大屏幕宽度为800像素的监视器，可以缩放它：

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

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

我不认为javascript会是一个答案，因为在页面加载过程中，图像占位符会跳到新的大小，如果我把代码放在开头附近，它会在一定程度上延迟页面的其余部分加载。

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

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

有什么答案吗？

这个规则虽然正确，但当响应式设计出现时，它就消失了：

省略IMG WIDTH或HEIGHT属性意味着页面文本会跳转随着图像的加载。可用性.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>

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

@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作为其他属性以保持图像缩放。

相关文章：